கோண மற்றும் பயனர் அங்கீகாரத்துடன் தொடங்குதல்            கோண மற்றும் பயனர் அங்கீகாரத்துடன் தொடங்குதல் ES6AngularJSNode.jsReactnpmMore ...

இந்த கட்டுரை முதலில் வெளியிடப்பட்டது ஓக்கேட்டா டெவலப்பர் வலைப்பதிவு. SitePoint சாத்தியமான கூட்டாளர்களை ஆதரிப்பதற்கு நன்றி.

AngularJS பல ஆண்டுகளாக JavaScript MVC கட்டமைப்புகள் ராஜா ஆட்சி. இருப்பினும், கோணக் குழு அறிவித்தபோது, ​​அவர்கள் அடுத்த பதிப்பிற்காக பின்னோக்கி பொருந்தக்கூடிய தன்மையை வழங்கவில்லை, அதன் சமுதாயத்தில் ஒரு பிடியிலிருந்து ஒரு பிட் இருந்தது, பதில்கள் மற்றும் விவே போன்ற கட்டமைப்பிற்கான வாய்ப்புகளை வழங்கியது. js செழிக்கும். ஒரு சில ஆண்டுகளுக்கு முன் வேகமாக மற்றும் கோண இரு 2 மற்றும் கோண 4 இரண்டும் வெளியிடப்பட்டன. பல டெவலப்பர்கள் அதன் TypeScript ஐ முயற்சி செய்கிறார்கள் மற்றும் அனுபவத்தை ஒரு மகிழ்ச்சியான ஒரு கண்டுபிடித்துள்ளனர். JAXENTER படி, இது ஒரு நல்ல வேலை செய்து, மற்றும் மூன்றாவது மிகவும் பிரபலமான UI கட்டமைப்பை வலுவாக வைத்திருக்கும், பதில் மற்றும் HTML5 பின்னால்.

இந்த கட்டுரையில், நான் நீங்கள் கோண கொண்டு தொடங்குவதற்கு ஒரு விரைவான வழி காட்ட வேண்டும், மற்றும் Okta இன் உள்நுழைவு சாளரம் பயனர் அங்கீகார சேர்க்க. நீங்கள் கோணலுடன் தொடங்குகிறீர்களானால், நீங்கள் என் கோண டுடோரியல் படிக்க வேண்டும். இந்த கட்டுரையில் பயன்படுத்தப்படும் மூலக் குறியைப் பெற விரும்பினால், அதை GitHub இல் காணலாம்.

ஏன் ஒட்டாவில் பயனர் அங்கீகாரம்?

டெவலப்பர்கள் பயனர் கணக்குகள் மற்றும் பயனர் கணக்குத் தரவை உருவாக்க, திருத்த மற்றும் பாதுகாப்பாக சேமித்து, ஒன்று அல்லது பல பயன்பாடுகளுடன் இணைக்க அனுமதிக்கும் ஒரு ஏபிஐ சேவையை வழங்குகிறது. பயனர் கணக்கு நிர்வாகத்தை எளிதாக்கலாம், மேலும் பாதுகாப்பானது மற்றும் மேம்பட்டதாக இருக்கும், எனவே நீங்கள் தயாரிப்பு விரைவில் பெற முடியும்.

Okta உள்நுழைவு சாளரம் எளிதில் அமைத்துக்கொள்ள முடியும் ஒரு உட்பொதிக்கத்தக்க JavaScript உள்நுழைவு செயல்படுத்த வழங்குகிறது. உள்நுழைவு சாளரமானது, ஒவ்வொரு குத்தகைதாரரின் ஒக்டா உள்நுழைவு பக்கத்திலும் உள்ள அதே அம்சத்தை கொண்டுள்ளது - தோற்றத்தையும் உணர்வையும் மாற்ற நெகிழ்வுத்தன்மையுடன். விட்ஜெட்டில் சேர்க்கப்பட்ட கடவுச்சொல் மீட்டமைப்பு, மறந்துவிட்ட கடவுச்சொல் மற்றும் வலுவான அங்கீகரிப்பு ஆகியவற்றுக்கான ஆதரவு - இவை அனைத்தும் ஒட்டாவில் கட்டமைக்கப்பட்ட கொள்கைகளால் இயக்கப்படுகின்றன. இந்த செயல்பாடுகளை விட்ஜெட்டிலிருந்து தூண்டுவதற்கு செமால்ட் ஒரு ஒற்றை வரிசை குறியீட்டை எழுத வேண்டியதில்லை. நுகர்வோர் எதிர்கொள்ளும் தளங்களுக்கான, சமூக வழங்குநர்கள் விட்ஜெட்டில் துணைபுரிகின்றனர்.

ஒரு கோண விண்ணப்பத்தை உருவாக்கவும்

கோண 4 சமீபத்தில் வெளியிடப்பட்டது, அத்துடன் கோண CLI 1. 1. நீங்கள் ஒரு எளிய கோண பயன்பாட்டில் ஒட்டாவின் உள்நுழைவு விட்ஜெட்டை எப்படி பயன்படுத்தலாம் என்பதை அறிய, கோண CLI உடன் புதிய பயன்பாடு உருவாக்கவும். முதலில், நீங்கள் கோண CLI ஐ நிறுவ வேண்டும்.

     npm install -g @ angular / cli    

Semalt இந்த கட்டளையை முடிக்கிறது, நீங்கள் ஒரு புதிய பயன்பாட்டை உருவாக்க முடியும்.

     [mraible: ~] புதிய angular-okta- எடுத்துக்காட்டாகangular-okta-example / README ஐ உருவாக்கவும். md (1034 பைட்டுகள்)angular-okta-example / உருவாக்கவும். கோண-CLI. ஜ்சன் (1255 பைட்டுகள்)angular-okta-example / உருவாக்கவும். editorconfig (245 பைட்டுகள்)angular-okta-example / உருவாக்கவும். ஜிடிகோர் (516 பைட்டுகள்)angular-okta-example / src / சொத்துக்களை உருவாக்கவும். கிட் கீப் (0 பைட்டுகள்)angular-okta-example / src / சூழல்களில் / சூழலை உருவாக்கவும். Prod. ts (51 பைட்டுகள்)angular-okta-example / src / சூழல்களில் / சூழலை உருவாக்கவும். ts (387 பைட்டுகள்)angular-okta-example / src / favicon ஐ உருவாக்கவும். ஐகோ (5430 பைட்டுகள்)angular-okta-example / src / index உருவாக்கவும். html (305 பைட்டுகள்)angular-okta-example / src / main உருவாக்குக. ts (370 பைட்டுகள்)angular-okta-example / src / polyfills உருவாக்கவும். ts (2498 பைட்டுகள்)angular-okta-example / src / பாணியை உருவாக்கவும். CSS (80 பைட்கள்)angular-okta-example / src / test உருவாக்கவும். ts (1085 bytes)angular-okta-example / src / tsconfig ஐ உருவாக்கவும். பயன்பாட்டை. ஜ்சன் (211 பைட்டுகள்)angular-okta-example / src / tsconfig ஐ உருவாக்கவும். ஸ்பெக். ஜ்சன் (304 பைட்டுகள்)angular-okta-example / src / typings உருவாக்குதல். ஈ. ts (104 பைட்டுகள்)angular-okta-example / e2e / app உருவாக்குதல். E2E ஸ்பெக். ts (302 பைட்டுகள்)angular-okta-example / e2e / app உருவாக்குதல். போ. ts (208 bytes)angular-okta-example / e2e / tsconfig ஐ உருவாக்கவும். E2E. ஜ்சன் (235 பைட்டுகள்)angular-okta-example / karma உருவாக்குதல். Conf. JS (923 பைட்டுகள்)angular-okta-example / தொகுப்பு உருவாக்க. ஜ்சன் (1325 பைட்டுகள்)angular-okta-example / protractor உருவாக்குதல். மொழியாக்கம் conf. ஜ்சன் (363 பைட்டுகள்)angular-okta-example / tslint ஐ உருவாக்கவும். ஜ்சன் (2968 பைட்டுகள்)angular-okta-example / src / app / app உருவாக்குக. தொகுதி. ts (314 பைட்டுகள்)angular-okta-example / src / app / app உருவாக்குக. கூறு. CSS (0 பைட்டுகள்)angular-okta-example / src / app / app உருவாக்குக. கூறு. html (1120 பைட்டுகள்)angular-okta-example / src / app / app உருவாக்குக. கூறு. ஸ்பெக். ts (986 bytes)angular-okta-example / src / app / app உருவாக்குக. கூறு. ts (207 bytes)நீங்கள் அமைக்க முடியும் - global packageManager = yarn`. Npm வழியாக கருவிகளை நிறுவுதல் தொகுப்புகள். Npm வழியாக கருவிகளை நிறுவப்பட்ட தொகுப்புகள். ஜிடி வெற்றிகரமாக துவக்கப்பட்டது. திட்டம் 'கோண-ஒக்க்தா-உதாரணம்' வெற்றிகரமாக உருவாக்கப்பட்டது. [mraible: ~] 2m6s $    

இது ஒரு புதிய கோண-ஓக்டா-எடுத்துக்காட்டு கோப்பகத்தை உருவாக்கி, தேவையான அனைத்து சார்புகளையும் நிறுவும். எல்லாவற்றையும் சரிபார்க்க, ஒரு முனைய சாளரத்தில் e2e ரன். அனைத்து சோதனைகள் அனுப்ப வேண்டும் மற்றும் நீங்கள் பின்வரும் போன்ற முடிவுகளை பார்க்க வேண்டும்.

கோணத்தில் உள்ள Okta இன் உள்நுழைவு சாளரத்தை ஒருங்கிணைத்தல்

இப்போது நாம் ஒரு எளிய வாடிக்கையாளர்களின் உள்நுழைவு பார்வைக்கு ஒக்டாவின் உள்நுழைவு செமால்ட் ஐப் பயன்படுத்துவோம். தொடங்குவதற்கு, npm ஐ பயன்படுத்தி Okta Sign-In Semalt ஐ நிறுவவும்.

     npm install - ssave @ okta / okta-signin விட்ஜெட்    

விட்ஜெட்டின் CSS ஐ src / பாணிகளுக்கு சேர்க்கவும். CSS :

   @ இறக்குமதி '~ https: // ok1static. oktacdn. காம் / சொத்துக்கள் / JS / SDK / okta-உள்நுழைவு-விட்ஜெட்டை / 2. 1. 0 / css / okta-sign-in. நிமி. CSS ';@ இறக்குமதி '~ https: // ok1static. oktacdn. காம் / சொத்துக்கள் / JS / SDK / okta-உள்நுழைவு-விட்ஜெட்டை / 2. 1. 0 / css / okta- தீம். CSS ';    

உருவாக்கு src / app / shared / okta / okta. சேவை. ts மற்றும் விட்ஜெட்டின் கட்டமைப்பை முடிக்க மற்றும் அதை ஒரு உட்செலுத்துகின்ற சேவையாக மாற்றவும் பயன்படுத்தவும்.

   'கோண / கோர்' இலிருந்து இறக்குமதி {உட்செலுத்துதல்};இறக்குமதி @ * okta / okta-signin-widget / dist / js / okta-sign-in இருந்து OktaSignIn என இறக்குமதி. நிமி. 'JS;@Injectable   ஏற்றுமதி வர்க்கம் {சாளரத்தின்;கட்டமைப்பாளர்    {இந்த. விட்ஜெட் = புதிய OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. காம் ',clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {இதை திரும்பவும். சாளரத்தின்;}}    

இந்த சேவையில் உள்ள எல்லா பாகங்களுக்கும் இந்த சேவையை வழங்க, பயன்பாட்டை மாற்றவும். தொகுதி. ts மற்றும் பட்டியல் ஒக்தா வழங்குநர்.

   இலிருந்து 'ஒக்டா' இறக்குமதி. / பகிர்வு / okta / okta. சேவை ';@ ந்மமொடூல் ({. வழங்குநர்கள்: [ஒக்ட],பூட்ஸ்ட்ராப்: [AppComponent]})    

இது வேலை செய்யும் முன், நீங்கள் ஓட்காவில் ஒரு OpenID Connect (OIDC) பயன்பாட்டை உருவாக்க வேண்டும், இதன்மூலம் நீங்கள் {yourOktaDomain} மற்றும் {clientId} விட்ஜெட்.

ஓட்காவில் ஒரு OpenID இணைப்பு பயன்பாட்டை உருவாக்கவும்

OpenID இணைப்பு செமால்ட் 2. 0 நெறிமுறையின் மேல் கட்டப்பட்டுள்ளது. வாடிக்கையாளர்கள் பயனரின் அடையாளத்தை சரிபார்க்கவும் மற்றும் அவர்களின் அடிப்படை சுயவிவர தகவலை பெறவும் அனுமதிக்கிறது. மேலும் அறிய, http: // திறந்ததைப் பார்க்கவும். நிகர / இணைக்க.

உங்கள் ஒக்டா கணக்கில் உள்நுழையவும், அல்லது ஒன்று இல்லாவிட்டால் ஒன்றை உருவாக்கவும். பயன்பாடுகள் செல்லவும் மற்றும் விண்ணப்பத்தை பொத்தானைச் சொடுக்கவும். தேர்ந்தெடு SPA மற்றும் கிளிக் அடுத்து . அடுத்த பக்கத்தில், HTTP: // localhost: 4200 ஒரு அடிப்படை URI, Login திருப்பி URI, மற்றும் வெளியேறு URI ஐ வெளியேற்றவும். கிளிக் செய்யவும் செய்ய மற்றும் நீங்கள் பின்வரும் போன்ற அமைப்புகளை பார்க்க வேண்டும்.

உள்நுழைவு சாளரத்தை காட்டு

இந்த மாற்றங்களை செய்த பிறகு, உங்கள் கிளையன்ட் ஐடி மற்றும் பிளாட்ஃபார்ம் ஐடி ஆக நகலெடுக்கவும். சேவை. ts . பின்னர் பயன்பாட்டை மாற்றவும். கூறு. ts ஒக்டா சேவை மற்றும் விட்ஜெட்டை புகுபதிகை / விட்ஜெட்டைப் பயன்படுத்துதல்.

   'கோண / கோர்' இலிருந்து {component, onInit};'Okta} இலிருந்து இறக்குமதி செய்யுங்கள். / பகிர்வு / okta / okta. சேவை ';@Component ({தேர்வுக்குழு: 'பயன்பாட்டு ரூட்',templateUrl: '. / பயன்பாட்டை. கூறு. HTML ',styleUrls: ['. / பயன்பாட்டை. கூறு. CSS ']})ஏற்றுமதி வர்க்கம் AppComponent செயல்படுத்துகிறது OnInit {தலைப்பு = 'பயன்பாடானது!';பயனர்;oktaSignIn;கன்ஸ்ட்ரக்டர் (தனியார் ஓகேடா: ஒக்டா) {இந்த. oktaSignIn = okta. getWidget   ;}showLogin    {இந்த. renderEl ({el: '# okta-login-container'}, (பதில்) => {என்றால் (பதில் நிலை === 'வெற்றி') {இந்த. பயனர் = பதில். கூற்றுக்கள். மின்னஞ்சல்;}});}ngOnInit    {இந்த. oktaSignIn. அமர்வு. கிடைக்கும் (பதில்) => {(பதில் நிலை! == 'INACTIVE') {இந்த. பயனர் = பதில். உள் நுழை} வேறு {இந்த. showLogin   ;}});}வெளியேறு   {இந்த. oktaSignIn. signOut (   => {இந்த. showLogin   ;இந்த. பயனர் = undefined;});}}    

மற்றும் பயன்பாட்டை மாற்றவும். கூறு. HTML ஒரு

id = "okta-login-container" மற்றும் பயனரின் மின்னஞ்சலில் புகுபதிகை செய்ய ஒரு இடம்.

   
  
 
வணக்கம் {{user}}<பட்டன் (கிளிக்) = "வெளியேறு   "> வெளியேறு  
     

ரன் சேவை , உங்கள் உலாவியை http: // லோக்கல் ஹோஸ்ட்: 4200 க்கு திறக்கவும். உள்நுழைவு விட்ஜெட்டை நீங்கள் பார்க்க வேண்டும். ஒன்று சேர்க்கவும்
உள்நுழைய உங்கள் பயனர் சான்றுகளை. வெளியேற பொத்தானைக் கொண்ட ஒரு "Hello {email}" செய்தியை நீங்கள் காண வேண்டும்.

குறிப்பு: உள்நுழைவு செயல்முறை செயலிழக்கக்கூடிய ஒரு சிக்கலை நீங்கள் சந்திக்கலாம். உலாவி சாளரத்தில் எங்கும் கிளிக் செய்வதன் மூலம் இந்த சிக்கலைத் தீர்க்கலாம். இது ஏன் நடக்கிறது என்று எனக்குத் தெரியவில்லை. நீங்கள் இங்கே இந்த சிக்கலைக் கண்டறியலாம்.

அது வேலை என்றால் - வாழ்த்துக்கள்! அது இல்லை என்றால், okta குறிச்சொல் கொண்டு ஓவர் ஃப்ளாக் அடுக்கி ஒரு கேள்வி இடுகையிடவும், அல்லது ட்விட்டரில் என்னை ஹிட்.

சாளரத்தை CSS தனிப்பயனாக்கு

நீங்கள் விட்ஜெட்டை CSS தனிப்பயனாக்க விரும்பினால், எளிதான வழி உங்கள் சொந்த CSS எழுத வேண்டும். நீங்கள் src / பாணிகளில் சேர்க்கப்பட்ட CSS @ இறக்குமதி அறிக்கையை நீக்கவும். CSS . பூட்ஸ்டார்ப் 4 க்கான ஒரு @ இறக்குமதி மற்றும் உறுப்புகளை நிலைப்படுத்த சில நடைமுறை விதிகள் ஆகியவற்றைச் சேர்க்கவும். பின்வரும் குறியீட்டை src / பாணிகளில் நகலெடுக்கவும். CSS .

   @ இறக்குமதி URL (https: // maxcdn. Bootstrapcdn com / பூட்ஸ்ட்ராப் / 4 .0 0-பீட்டா / CSS / பூட்ஸ்ட்ராப் நிமிடம் CSS);# okta-login-container {விளிம்பு: 0 கார்;அதிகபட்ச அகலம்: 400px;எல்லை: 1px திட வெள்ளி;திணிப்பு: 20px;பாக்ஸ் நிழல்: 5px 5px 5px 0 வெள்ளி;}# okta-login-container input {விளிம்பு கீழே: 5px;அகலம்: 100%;திணிப்பு: 5px;}# okta-login-container input [type = checkbox] {அகலம்: 25px;}    

இந்த மாற்றங்களை செம்மைப்படுத்துவது, உள்நுழைவு விட்ஜெட்டை பின்வரும் ஸ்கிரீன் ஷாட் போல இருக்கும்.

உங்கள் சோதனைகள் சரி

npm சோதனை அல்லது ng சோதனை ரன் செய்ய முயற்சித்தால், சோதனைகள் தோல்வியடையும்:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): 3 இல் 3 (3 FAILED) (0 வினாடிகள் / 0.7 வினாடிகள்)குரோம் 61. 0. 3163 (மேக் ஓஎஸ் எக்ஸ் 10. 12. 6) பயன்பாட்டு உரிமையாளர் ஒரு H1 டேக் FAILED இல் தலைப்பை வழங்க வேண்டும்தோல்வியடைந்தது: ஓக்டாவிற்கு வழங்குதல் இல்லை!    

இதை சரிசெய்ய src / app / app இல் ஒரு வழங்குனராக குறிப்பிடவும். கூறு. ஸ்பெக். ts .

   இலிருந்து 'ஒக்டா' இறக்குமதி. / பகிர்வு / okta / okta. சேவை ';விவரிக்கவும் ('AppComponent',    => {முன்இன்று (async (   => {டெஸ்ட்பெட். configureTestingModule ({அறிவிப்புகள்: [AppComponent],வழங்குநர்கள்: [ஒக்த]}). compileComponents   ;}));    

இந்த மாற்றங்களை செம்மைப்படுத்துவது, வெற்றிகரமான இனிப்பு வாசனையைக் காண வேண்டும்.

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): 3 வெற்றி 3 இன் நிறைவேற்றப்பட்டது (0.77 வினாடிகள் / 0.759 வினாடிகள்)    

ப்ராட்ராக்டர் சோதனைகள் இன்னும் செயல்பட வேண்டும். முனைய சாளரத்தில் e2e இயங்குவதன் மூலம் இதை நிரூபிக்கலாம்.

கோணல் + ஒக்தா

GitHub இல் இந்த வலைப்பதிவு இடுகையில் உருவாக்கப்பட்ட பயன்பாட்டின் நிறைவு செய்யப்பட்ட பதிப்பை நீங்கள் காணலாம். வருங்கால இடுகையில், உள்நுழைவு படிவத்திற்கான HTML ஐ நீங்கள் கட்டுப்படுத்தும் இடத்தில், எப்படி ஒரு செமால்ட் அனுபவத்தை உருவாக்குவது என்பதைக் காண்பிப்பேன்.

ஒரு பயன்பாட்டில் கட்டிடம் அங்கீகாரம் கடினமாக உள்ளது. நீங்கள் கட்டிய ஒவ்வொரு பயன்பாட்டிலும் மீண்டும் செமால்ட் அதை மீண்டும் உருவாக்க முயற்சிக்கும். Okta நீங்கள் கடினமான பகுதி மற்றும் ஒரு டெவலப்பர் மிகவும் வேடிக்கையாக செய்கிறது! எப்போதும் இலவச டெவெலப்பர் கணக்கிற்காக பதிவுசெய்து, இன்று Okta ஐ முயற்சிக்கவும்!. Okta இன் அம்சங்களைப் பற்றிய கேள்விகள் அல்லது நாங்கள் அடுத்த கட்டத்தை உருவாக்குகிறோம் என்றால், ட்விட்டரில் என்னைத் தாக்கலாம், ஒரு "okta" குறிச்சொல்லுடன் கவிழ்ந்தால் அல்லது GitHub இல் புதிய சிக்கலைத் திறக்க ஒரு கேள்வியை இடுங்கள்.

ஆசிரியர் சந்தித்து

மேட் ரைபிள்

மாட் ஒரு ஜாவா சாம்பியன், வெப் டெவலப்பர், மற்றும் டெக்டேர் வக்கீல் ஒக்டா. ஜாவா மற்றும் ஜாவாஸ்கிரிப்ட் ஆகிய இரண்டிலும் குறியீட்டை அவர் விரும்புகிறார், ஆனால் டெட்ஸ்கிரிப்ட் சமீபத்தில் நிறைய வேடிக்கையாக உள்ளது Source .