Back to Question Center
0

สร้างแอปที่มีการตรวจสอบผู้ใช้ภายใน 15 นาที            สร้างแอปพลิเคชันที่มีการตรวจสอบผู้ใช้ภายใน 15 นาทีหัวข้อที่เกี่ยวข้อง: เครื่องมือ & Semalt ...

1 answers:
สร้าง React App ด้วยการตรวจสอบผู้ใช้ภายใน 15 นาที

บทความนี้เคยปรากฏในบล็อก OKTA ขอบคุณที่สนับสนุนคู่ค้าที่ทำให้ SitePoint เป็นไปได้

React ได้กลายเป็นหนึ่งในเฟรมเวิร์คหน้าเว็บที่ได้รับความนิยมสูงสุดและเป็นที่สองรองจาก HTML5 เก่าเท่านั้นตาม Semalt ดังนั้นจึงไม่แปลกใจที่นักพัฒนากำลังเรียนรู้มันและนายจ้างจะขอมัน

ในบทแนะนำนี้คุณจะเริ่มต้นด้วยแอป React ที่เรียบง่ายและมีสองหน้าเว็บและมีการกำหนดเส้นทางภายในและเพิ่มการตรวจสอบสิทธิ์โดยใช้ Okta's Sign-In Widget Widget การลงชื่อเข้าใช้เป็นวิดเจ็ต Javascript ที่สามารถฝังได้ซึ่งจะช่วยให้นักพัฒนาซอฟต์แวร์สามารถใช้สถาปัตยกรรมที่มีความปลอดภัยและสามารถปรับขนาดได้ของ Okta โดยใช้ความพยายามขั้นต่ำจากภายในแอปพลิเคชัน React Semalt เริ่มต้น!

รับโครงการเมล็ดพันธุ์แบบเรียบง่าย

เริ่มต้นด้วยการโคลนโครงการ Semalt seed ที่เรียบง่าย

     git clone https: // github co.th / leebrandt / ง่ายตอบสนองเมล็ด git okta-react-widget-samplecd okta-react-widget-sample    

เพิ่ม Okta Sign-In Widget

ติดตั้ง Okta Sign-In Semalt โดยใช้ NPM

     npm install @ okta / okta-signin-widget @ 2. 3 - minecraft diamond ore guide. 0 - ประหยัด    

รหัสนี้จะเพิ่มรหัส Widget เข้าสู่ Okta ในโฟลเดอร์ node_modules ของคุณ เราจะใช้เวอร์ชัน 2 3. Widget เข้าสู่ระบบ 0 รายการ

สร้างแอปที่มีการตรวจสอบผู้ใช้ภายใน 15 นาทีสร้างแอปพลิเคชันที่มีการตรวจสอบผู้ใช้ภายใน 15 นาทีหัวข้อที่เกี่ยวข้อง:
เครื่องมือและ Semalt .

จากนั้นเพิ่มสไตล์สำหรับวิดเจ็ตในดัชนี ของคุณ html จาก Okta CDN เพิ่มบรรทัดเหล่านี้ภายในแท็ก :

   <ลิงก์href = "https: // ok1static oktacdn. com / asset / js / sdk / okta-signin-widget / 2. 3. 0 / css / okta-sign-in นาที. css"type = "text / css ที่"rel = "สไตล์ชีต" />    

คอมโพเนนต์ LoginPage

ก่อนอื่นให้สร้างโฟลเดอร์ที่ชื่อ auth ใน / src / components จากนั้นสร้างไฟล์ที่เรียกว่า LoginPage js โดยที่คอมโพเนนต์ LoginPage จะไป

Semalt กับองค์ประกอบพื้นฐานที่สุด:

   import ตอบโต้จาก 'react';export class เริ่มต้น LoginPage ขยายตอบสนอง ตัวแทน {แสดงผล    {กลับ(
หน้าเข้าสู่ระบบ
);}}

องค์ประกอบเล็ก ๆ นี้ไม่ได้ ทำ มาก แต่อย่างน้อยตอนนี้คุณมีหมายเลขอ้างอิงเพื่อเพิ่ม LoginPage ไปยังเส้นทางของคุณ ดังนั้นใน ของคุณ / src / แอป js คุณจะนำเข้าส่วนประกอบที่ด้านบนสุด:

   import LoginPage จาก '. / อุปกรณ์ / รับรองความถูกต้อง / LoginPage ';    

จากนั้นเพิ่มเส้นทางภายในเส้นทางหลัก (เส้นทางที่มีเส้นทาง "/")

   <เส้นทางเส้นทาง = "/ login" component = {LoginPage} />    

เพิ่มแอ็พพลิเคชัน OpenID Connect ใน Okta

ในการใช้ Okta เป็นผู้ให้บริการ OpenID Semalt ในการตรวจสอบสิทธิ์คุณจะต้องติดตั้งแอพพลิเคชันในคอนโซลนักพัฒนาซอฟต์แวร์ Okta

ถ้าคุณไม่มีบัญชีผู้พัฒนา Okta ให้ไปที่ create one! เมื่อคุณลงชื่อเข้าใช้แล้วคลิกที่ แอปพลิเคชัน ในแถบนำทางด้านบนจากนั้นคลิก เพิ่มแอปพลิเคชัน เลือก SPA เป็นแพลตฟอร์มและคลิกถัดไป เปลี่ยน URI เปลี่ยนเส้นทางไปที่ http: // localhost: 3000 แล้วคลิกเสร็จสิ้น แอ็พพลิเคชันจะถูกสร้างขึ้นโดยใช้การตั้งค่าต่อไปนี้:

ขณะนี้คุณมีแอปพลิเคชันที่สร้างขึ้นใน Okta แล้วคุณสามารถตั้งค่าวิดเจ็ตเพื่อพูดคุยกับแอปพลิเคชันใหม่ได้!

เพิ่มวิดเจ็ตลงในคอมโพเนนต์ของคุณ

   import ตอบโต้จาก 'react';นำเข้า OktaSignIn จาก '@ okta / okta-signin-widget';export class เริ่มต้น LoginPage ขยายตอบสนอง ตัวแทน {คอนสตรัค    {ซุปเปอร์   ;นี้. widget = new OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});}แสดงผล    {กลับ(
หน้าเข้าสู่ระบบ
);}}

คัดลอก ID ไคลเอ็นต์ที่สร้างขึ้นจากหน้าการตั้งค่าของแอปพลิเคชันและวางผ่าน {clientId} ตรวจสอบว่าคุณได้เปลี่ยน URL ขององค์กร Okta {oktaOrgUrl} ซึ่งคุณสามารถหาได้ด้วยการกลับไปที่หน้าแดชบอร์ดหลักในคอนโซลนักพัฒนาซอฟต์แวร์ โดยปกติจะมีลักษณะดังนี้: https: // dev-12345 oktapreview com

คุณได้นำเข้าฟังก์ชัน OktaSignIn จากโมดูล Okta Sign-In Widget npm ที่ติดตั้งไว้ก่อนหน้านี้แล้ว ถัดไปใน constructor ของคอมโพเนนต์คุณได้เริ่มต้นอินสแตนซ์ของ OktaSignIn ด้วยการกำหนดค่าสำหรับแอ็พพลิเคชัน ด้วยวิธีนี้รหัสแอ็พพลิเคชันจะสามารถพูดคุยกับ Okta และ Okta จะรับรู้ว่านี่คือแอปพลิเคชันที่คุณเพิ่งสร้างขึ้น

แสดงเครื่องมือการเข้าสู่ระบบ

จากนั้นคุณจะสร้างรหัสเพื่อแสดงวิดเจ็ตการลงชื่อเข้าใช้ในหน้าเว็บจริง! คุณจะต้องเปลี่ยนวิธีการแสดงผลของคุณเพื่อสร้างองค์ประกอบ HTML ที่คุณสามารถแสดงผลวิดเจ็ตได้ ตรวจสอบให้แน่ใจว่าได้รับการอ้างอิงถึงองค์ประกอบที่จะแสดงผล จากนั้นเพิ่มฟังก์ชัน componentDidMount เพื่อให้แน่ใจว่าคุณไม่ได้พยายามแสดงวิดเจ็ตก่อนองค์ประกอบ HTML อยู่ในหน้า

   import ตอบโต้จาก 'react';นำเข้า OktaSignIn จาก '@ okta / okta-signin-widget';export class เริ่มต้น LoginPage ขยายตอบสนอง ตัวแทน {คอนสตรัค    {ซุปเปอร์   ;นี้. state = {user: null};นี้. widget = new OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});}componentDidMount    {นี้. วิดเจ็ต renderEl ({el: this. loginContainer},(ตอบสนอง) => {นี้. setState ({user: การตอบกลับการอ้างสิทธิ์ email});}(err) => {ปลอบใจ เข้าสู่ระบบ (ผิดพลาด);});}แสดงผล    {กลับ(
{this. loginContainer = div; }} />);}}

คุณเพิ่มสถานะลงในคอมโพเนนต์ของคุณ หากคุณกำลังใช้งานฟลักซ์นี้จะมาจากสถานะแอปพลิเคชันโดยธรรมชาติ แต่เพื่อให้การสอนแบบนี้เป็นแบบเรียบง่ายให้ LoginPage ติดตามสถานะของตนเอง

ตรวจสอบว่าผู้ใช้ล็อกอิน

เราเกือบจะอยู่ที่นั่น แต่คุณไม่ต้องการที่จะแสดงวิดเจ็ตในทันที คุณจะต้องเพิ่มเช็คเพื่อให้แน่ใจว่าผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้และย้าย renderEl ออกไปยังฟังก์ชันที่เรียกว่า showLogin

   // สิ่งอื่น ๆ ที่ถูกลบออกเนื่องจากความกะทัดรัดcomponentDidMount    {นี้. วิดเจ็ต เซสชั่น get ((ตอบ) => {if (response! status! == 'INACTIVE') {นี้. setState ({user: response. login});}อื่น{นี้. showLogin   ;}});}showLogin    {กระดูกสันหลัง. ประวัติศาสตร์ หยุด  ;นี้. วิดเจ็ต renderEl ({el: this. loginContainer},(ตอบสนอง) => {นี้. setState ({user: การตอบกลับการอ้างสิทธิ์ email});}(err) => {ปลอบใจ เข้าสู่ระบบ (ผิดพลาด);});}    

คุณอาจสังเกตเห็นโค้ดแปลก ๆ ในเมธอด showLogin บรรทัดแรกที่: กระดูกสันหลัง ประวัติศาสตร์ หยุด วิดเจ็ตใช้ Backbone js เพื่อนำทางระหว่างหน้าจอของตนเอง (เข้าสู่ระบบลืมรหัสผ่าน ฯลฯ. ประวัติศาสตร์ เนื่องจากตอนนี้คุณได้ย้ายออกไปสู่ฟังก์ชัน showLogin วิดเจ็ตจะแสดงผลใหม่เมื่อเรียกใช้ฟังก์ชัน ดังนั้นนี่เป็นเพียงเคล็ดลับเล็ก ๆ น้อย ๆ ที่จะบอก Backbone เพื่อหยุดประวัติเนื่องจากจะเริ่มต้นใหม่เมื่อมีการแสดงวิดเจ็ต

คอมโพเนนต์การลงชื่อเข้าใช้ครั้งสุดท้าย

ให้เราตัดเรื่องนี้ขึ้น ตรวจสอบให้แน่ใจว่าคุณผูกบริบทของ ของชั้นเรียนนี้กับแต่ละวิธีของคุณ เพิ่มวิธีการออกจากระบบ และเปลี่ยนวิธีการแสดงผล ของคุณเพื่อตัดสินใจว่าควรจะแสดงผลอย่างไรโดยขึ้นอยู่กับว่ามีผู้ใช้ที่ล็อกอินอยู่หรือไม่

ดังนั้นรุ่นสุดท้ายของ LoginPage js ควรมีลักษณะดังนี้:

   import ตอบโต้จาก 'react';นำเข้า OktaSignIn จาก '@ okta / okta-signin-widget';export class เริ่มต้น LoginPage ขยายตอบสนอง ตัวแทน {คอนสตรัค    {ซุปเปอร์   ;นี้. state = {user: null};นี้. widget = new OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});นี้. showLogin = นี้ showLogin ผูก (นี้);นี้. ออกจากระบบ = นี้ ออกจากระบบ. ผูก (นี้);}componentDidMount    {นี้. วิดเจ็ต เซสชั่น get ((ตอบ) => {if (response! status! == 'INACTIVE') {นี้. setState ({user: response. login});}อื่น{นี้. showLogin   ;}});}showLogin    {กระดูกสันหลัง. ประวัติศาสตร์ หยุด  ;นี้. วิดเจ็ต renderEl ({el: this. loginContainer},(ตอบสนอง) => {นี้. setState ({user: การตอบกลับการอ้างสิทธิ์ email});}(err) => {ปลอบใจ เข้าสู่ระบบ (ผิดพลาด);});}ออกจากระบบ  {นี้. วิดเจ็ต signOut (   => {นี้. setState ({user: null});นี้. showLogin   ;});}แสดงผล    {กลับ(
{นี้. สถานะ. ผู้ใช้? (
ยินดีต้อนรับ {this. สถานะ. ผู้ใช้}!
): null}{นี้. สถานะ. ผู้ใช้? null: (
{this. loginContainer = div; }} />)}
);}}

React จะเชื่อมต่อกับเส้นทาง / login และแสดง Okta Sign-In Widget เพื่อแจ้งให้ผู้ใช้เข้าสู่ระบบ

เพิ่มลิงก์ล็อกอินไปที่แถบนำทางด้านบนโดยการแก้ไข / src / ชิ้นส่วน / ทั่วไป / นำร่อง js และเพิ่มลิงก์ใหม่ภายใต้ลิงก์รายชื่อติดต่อที่มีอยู่:

   
  • เข้าสู่ระบบ
  • เช็คเอาท์

    ตอนนี้ติดตั้งแพคเกจ npm:

         ติดตั้ง NPM    

    เมื่อคุณเรียกใช้แอพพลิเคเดี๋ยวนี้ (ด้วย npm start ) คุณจะเห็นสิ่งต่างๆดังนี้:

    สร้างแอปที่มีการตรวจสอบผู้ใช้ภายใน 15 นาทีสร้างแอปพลิเคชันที่มีการตรวจสอบผู้ใช้ภายใน 15 นาทีหัวข้อที่เกี่ยวข้อง:
เครื่องมือและ Semalt .

    หากคุณมีปัญหากับแอพพลิเคชันให้ลองลบแพคเกจ node_modules และ json และรันคำสั่ง (28) npm install ใหม่ ควรแก้ไขปัญหาเกี่ยวกับการจัดการการพึ่งพาแพคเกจ

    ถ้าทำงาน: congrats! ถ้าไม่ได้โปรดโพสต์คำถามไปยัง Stack Overflow ด้วยแท็ก okta หรือตีฉันใน Semalt @leebrandt

    ตอบสนอง + เครื่องหมาย Okta

    คุณสามารถหาโปรแกรมประยุกต์ที่สร้างขึ้นในโพสต์บนบล็อกนี้ได้ที่ GitHub

    การตรวจสอบความถูกต้องของอาคารในแอพพลิเคชันทำได้ยาก Semalt แม้สนุกน้อยที่จะสร้างมันซ้ำแล้วซ้ำอีกในแต่ละโปรแกรมที่คุณสร้าง Okta เป็นส่วนที่ยากสำหรับคุณและทำให้สนุกมากยิ่งขึ้นในการเป็นนักพัฒนาซอฟต์แวร์! ลงชื่อสมัครใช้บัญชีนักพัฒนาซอฟต์แวร์ฟรีตลอดไปและทดลองใช้ Okta วันนี้!

    ฉันหวังว่าคุณจะสนุกกับการสนับสนุน React ของเราอย่างรวดเร็ว.

    March 1, 2018