Back to Question Center
0

15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો            15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો સંબંધિત વિષયો: સાધનો & મીમોલ્ટ ...

1 answers:
15 મિનિટ માં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો

આ લેખ મૂળમાં OKTA બ્લોગ પર દેખાયો. ભાગીદારોને સહાયતા આપવા બદલ આભાર, જે શક્ય બનાવે છે.

સેમલ્ટ મુજબ ઝડપથી પ્રતિક્રિયાઓ સૌથી વધુ તરફેણ ફ્રન્ટ-એન્ડ વેબ માળખામાં એક બની ગયું છે, અને સાદા જૂના HTML5 સુધી બીજા ક્રમે છે. તેથી કોઈ આશ્ચર્ય નથી કે વિકાસકર્તાઓ તે શીખી રહ્યાં છે, અને નોકરીદાતાઓ તેના માટે પૂછી રહ્યાં છે - free 2gb vps.

આ ટ્યુટોરીયલમાં, તમે થોડાક પૃષ્ઠો અને કેટલાક રૂટીંગમાં બિલ્ટ ઇન સાથે ખૂબ જ સરળ પ્રતિક્રિયા એપ્લિકેશનથી પ્રારંભ કરશો અને ઓક્ટાના સાઇન-ઇન વિજેટનો ઉપયોગ કરીને પ્રમાણીકરણ ઉમેરો. સાઇન-ઇન વિજેટ એ એક એમ્બેડ કરેલ જાવાસ્ક્રિપ્ટ વિજેટ છે જે વિકાસકર્તાઓને ઑક્ટાના સુરક્ષિત, સ્કેલેબલ આર્કીટેક્ચરને રિએક્ટ એપ્લિકેશન્સમાંથી ઓછામાં ઓછા પ્રયાસ સાથે વાપરવા માટે પરવાનગી આપે છે. મીઠું શરૂ કરો!

સિમ્પલ રિએક્ટ બીજ પ્રોજેક્ટ મેળવો

સરળ મીણબત્તી બીજ પ્રોજેક્ટ ક્લોનિંગ દ્વારા શરૂ કરો.

     જીઆઇટી ક્લોન https: // github. કોમ / લેઈબ્રાન્ડ / સરળ-પ્રતિક્રિયા-બીજ ગીટ ઓક્ટા-પ્રતિક્રિયા-વિજેટ-નમૂનોસીડી ઓક્ટા-પ્રતિક્રિયા-વિજેટ-નમૂનો    

ઓક્ટા સાઇન-ઇન વિજેટ ઉમેરો

npm નો ઉપયોગ કરીને ઓક્ટા સાઇન-ઇન સેમનલ સ્થાપિત કરો.

     npm સ્થાપિત @ ઓક્ટા / ઓક્ટા-સાઇનિન-વિજેટ @ 2 3. 0 --save    

આ તમારા નોડ_ મોડોડ્સ ફોલ્ડરમાં Okta સાઇન-ઇન વિજેટ કોડ ઉમેરશે. અમે સંસ્કરણ 2 નો ઉપયોગ કરીશું. 3. 0 સાઇન-ઇન વિજેટના.

15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો સંબંધિત વિષયો:
સાધનો અને સેમ્યુઅલ .

પછી તમારા અનુક્રમણિકા માં વિજેટ માટે શૈલીઓ ઉમેરો. ઓક્ટા સીડીએનથી એચટીએમએલ ફાઇલ. ટેગ અંદરની આ રેખાઓ ઉમેરો:

   <લિંકhref = "https: // ok1static. oktacdn. com / અસ્કયામતો / જેએસ / એસડીકે / ઓક્ટા-સાઇનિન-વિજેટ / 2. 3. 0 / CSS / ઓક્ટા-સાઇન-ઇન મી. CSS"પ્રકાર = "ટેક્સ્ટ / CSS"rel = "સ્ટાઇલશીટ" /><લિંકhref = "https: // ok1static. oktacdn. com / અસ્કયામતો / જેએસ / એસડીકે / ઓક્ટા-સાઇનિન-વિજેટ / 2. 3. 0 / CSS / ઓક્ટા-થીમ. CSS"પ્રકાર = "ટેક્સ્ટ / CSS"rel = "સ્ટાઇલશીટ" />    

લૉગિન પેજ કમ્પોનન્ટ

પ્રથમ, auth માં ફોલ્ડર બનાવો. / સ્રોત / ઘટકો ફોલ્ડર, પછી નામવાળી ફાઇલ બનાવો લૉગિનપેજ. જેએસ જ્યાં લૉગિન પેજ ઘટક જશે.

મોટાભાગના ઘટકો સાથે મીઠું:

   આયાત પ્રતિક્રિયાથી પ્રતિક્રિયા;નિકાસ ડિફૉલ્ટ ક્લાસ લૉગિનપેજ રીક્વેટ લંબાય છે. કમ્પોનન્ટ {રેન્ડર    {વળતર (
લૉગિન પૃષ્ઠ
);}}

આ નાનું ઘટક કરવું ઘણું બધું નથી પરંતુ ઓછામાં ઓછું તમારી રૂટીંગમાં લૉગિન પેજ ઉમેરવા માટે તમારી પાસે હેન્ડલ છે તેથી તમારામાં / સ્રોત / એપ્લિકેશન જેએસ ફાઇલ, તમે ટોચ પર ઘટક આયાત કરશો:

   'લૉગિનપેજ' માંથી આયાત કરો. / ઘટકો / auth / લૉગિનપૃષ્ઠ ';    

અને પછી માર્ગને મુખ્ય માર્ગની અંદર ઉમેરો ("/" ના પાથ સાથેની એક)

   <રૂટ પાથ = "/ લૉગિન" ઘટક = {લૉગિન પૃષ્ઠ} />    

ઓક્ટામાં OpenID કનેક્ટ એપ્લિકેશન ઉમેરો

પ્રમાણીકરણ માટે તમારા OpenID સેમ્યુઅલ પ્રદાતા તરીકે ઓક્ટાનો ઉપયોગ કરવા માટે, તમારે ઓક્ટા ડેવલપર કન્સોલમાં એક એપ્લિકેશન સેટ કરવાની જરૂર પડશે.

જો તમારી પાસે ઑક્ટા ડેવલપર એકાઉન્ટ નથી, તો એક બનાવો! એકવાર તમે લૉગ ઇન થઈ ગયા હોવ, ટોચની નવબારમાં એપ્લિકેશન્સ પર ક્લિક કરો, પછી એપ્લિકેશન (9 2) ઉમેરો ક્લિક કરો. પ્લેટફોર્મ તરીકે એસપીએ પસંદ કરો અને આગળ ક્લિક કરો. પુનઃદિશામાન URI ને http: // localhost: 3000 , અને પૂર્ણ ક્લિક કરો. એપ્લિકેશન નીચેની સેટિંગ્સ સાથે બનાવવામાં આવશે:

હવે ઓક્ટામાં તમારી પાસે એપ્લિકેશન છે, તમે તમારા નવા એપ સાથે વાત કરવા માટે વિજેટ સેટ કરી શકો છો!

તમારા કમ્પોનન્ટ માટે વિજેટ ઉમેરો

   આયાત પ્રતિક્રિયાથી પ્રતિક્રિયા;'ઓક્ટા / ઓક્ટા-સાઇનિન-વિજેટ' માંથી ઓક્ટાસ્ignઇન આયાત કરો;નિકાસ ડિફૉલ્ટ ક્લાસ લૉગિનપેજ રીક્વેટ લંબાય છે. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર    {સુપર   ;આ. વિજેટ = નવા ઓક્ટાસ્ignઇન ({baseUrl: 'https: // {oktaOrgUrl}',ક્લાયન્ટ આઈડી: '{clientId}',પુનઃઉપયોગકર્તા: 'http: // લોકલહોસ્ટ: 3000',authParam: {પ્રતિભાવપ્રકાર: 'id_token'}});}રેન્ડર    {વળતર (
લૉગિન પૃષ્ઠ
);}}

તમારા એપ્લિકેશનના સેટિંગ્સ પૃષ્ઠથી બનાવેલા ક્લાયન્ટ ID ની કૉપિ કરો અને તેને {clientId} પર પેસ્ટ કરો. ખાતરી કરો કે તમે {oktaOrgUrl} તમારા Okta સંગઠન URL સાથે બદલો છો, જે તમે વિકાસકર્તા કન્સોલમાં પાછા મુખ્ય ડેશબોર્ડ પૃષ્ઠ પર જઈને શોધી શકો છો. સામાન્ય રીતે તે આના જેવો દેખાશે: https: // dev-12345. ઓક્ટેપ્રેવ્યુ. કોમ

અત્યાર સુધી તમે ઑક્ટા સાઇન-ઇન વિજેટ એનપીએમ મોડ્યુલ જે તમે પહેલાં સ્થાપિત કરેલ છે તેમાંથી ઑક્ટાસ્ignઇન કાર્ય આયાત કર્યું છે. આગળ, કમ્પોનન્ટના કન્સ્ટ્રક્ટરમાં, તમે OktaSignIn ની આવૃત્તિને એપ્લિકેશન માટે ગોઠવણી સાથે શરૂ કરી. આ રીતે, એપ્લિકેશન કોડ ઓક્ટા સાથે વાત કરી શકશે અને ઓક્ટા એ માન્ય કરશે કે આ તમે બનાવેલ એપ્લિકેશન છે.

લૉગિન વિજેટ બતાવો

આગળ, તમે ખરેખર પૃષ્ઠ પર સાઇન-ઇન વિજેટને રેન્ડર કરવા માટે કોડ બનાવશો! તમે HTML રિઝોલ્યુશન બનાવવા માટે તમારી રેન્ડર પદ્ધતિ બદલવાની જરૂર પડશે જેમાં તમે વિજેટને રેન્ડર કરી શકો છો. પ્રસ્તુત કરવામાં આવશે તે ઘટકનો સંદર્ભ મેળવવાની ખાતરી કરો. પછી, HTML ઘટક પૃષ્ઠ પર છે તે પહેલાં તમે વિજેટને રેન્ડર કરવા માટે પ્રયાસ કરતા નથી તેની ખાતરી કરવા માટે ઘટક ડીઆઈડીએમએન્ટ ફંક્શન ઉમેરો.

   આયાત પ્રતિક્રિયાથી પ્રતિક્રિયા;'ઓક્ટા / ઓક્ટા-સાઇનિન-વિજેટ' માંથી ઓક્ટાસ્ignઇન આયાત કરો;નિકાસ ડિફૉલ્ટ ક્લાસ લૉગિનપેજ રીક્વેટ લંબાય છે. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર    {સુપર   ;આ. રાજ્ય = {વપરાશકર્તા: નલ};આ. વિજેટ = નવા ઓક્ટાસ્ignઇન ({baseUrl: 'https: // {oktaOrgUrl}',ક્લાયન્ટ આઈડી: '{clientId}',પુનઃઉપયોગકર્તા: 'http: // લોકલહોસ્ટ: 3000',authParam: {પ્રતિભાવપ્રકાર: 'id_token'}});}componentDidMount    {આ. વિજેટ renderEl ({el: this. loginContainer},(પ્રતિભાવ) => {આ. સેટસ્ટેટ ({વપરાશકર્તા: પ્રતિક્રિયા દાવા ઇમેઇલ});},(ભૂલ કરો) => {કન્સોલ લોગ (ભૂલ);});}રેન્ડર    {વળતર (
{આ. loginContainer = div; }} />);}}

તમે તમારા ઘટકમાં રાજ્ય ઉમેર્યું જો તમે પ્રવાહ અમલીકરણનો ઉપયોગ કરી રહ્યાં છો, તો તે કુદરતી રીતે એપ્લિકેશન સ્ટેટમાંથી આવશે. પરંતુ આ ટ્યુટોરીયલને સરળ રાખવા માટે, તમારા લૉગિન પેજ ને તેના પોતાના રાજ્યનો ટ્રેક રાખો.

ચકાસો કે શું વપરાશકર્તા લોગ ઇન છે

અમે લગભગ ત્યાં છીએ, પરંતુ તે જરૂરી નથી કે તમે તરત જ વિજેટને રેન્ડર કરો. તમે ખાતરી કરો કે વપરાશકર્તા પહેલાથી લૉગ ઇન નથી, અને showLogin નામના ફંક્શનમાં તમારા રેન્ડર EL ને ખસેડવા માટે એક ચેક ઉમેરવાની જરૂર પડશે.

   // . ટૂંકાણના ખાતર અન્ય સામગ્રી દૂરcomponentDidMount    {આ. વિજેટ સત્ર વિચાર ((પ્રતિસાદ) => {જો (પ્રતિસાદ સ્થિતિ! == 'INACTIVE') {આ. સેટસ્ટેટ ({વપરાશકર્તા: પ્રતિક્રિયા લૉગિન});} બીજું {આ. શો લોજીન   ;}});}શો લોજીન    {બેકબોન ઇતિહાસ. બંધ  ;આ. વિજેટ renderEl ({el: this. loginContainer},(પ્રતિભાવ) => {આ. સેટસ્ટેટ ({વપરાશકર્તા: પ્રતિક્રિયા દાવા ઇમેઇલ});},(ભૂલ કરો) => {કન્સોલ લોગ (ભૂલ);});}    

તમે તે શો લોજીન પદ્ધતિમાં એક અદ્ભુત કોડ જોયું હશે. તે પ્રથમ રેખા: બેકબોન ઇતિહાસ. સ્ટોપ વિજેટ પોતે બેકબોનનો ઉપયોગ કરે છે જેએસ તેના પોતાના સ્ક્રીન વચ્ચે નેવિગેટ કરવા માટે (પ્રવેશ, પાસવર્ડ ભૂલી ગયા છો, વગેરે. ઇતિહાસ તમે હવે શો લૉજીન ફંક્શનમાં તેને ખસેડી દીધું છે, તેથી જ્યારે વિધેય કહેવામાં આવે ત્યારે વિજેટ ફરીથી ફરીથી રેન્ડર થવાનું રહ્યું છે. તેથી આ બેકબોનને ઇતિહાસને રોકવા માટે થોડીક યુક્તિ છે, કારણ કે તે જ્યારે વિજેટ પ્રસ્તુત થાય ત્યારે ફરી શરૂ થશે.

અંતિમ લૉગિન પૃષ્ઠ પુન: ઘટક

ચાલો આ ઉપર લપેટીએ ખાતરી કરો કે તમે વર્ગના તમારા દરેક પદ્ધતિઓનો સંદર્ભ બાંધો છો. લોગઆઉટ પદ્ધતિ ઉમેરો અને તમારી રેન્ડર પદ્ધતિને બદલો, જે હાલમાં રેન્ડર કરવા માટેના નિર્ણયને આધારે, હાલમાં લોગ ઇન વપરાશકર્તા છે કે નહીં તેના આધારે.

તેથી અંતિમ આવૃત્તિ લૉગિન પૃષ્ઠ. જેએસ આના જેવી દેખાવી જોઈએ:

   આયાત પ્રતિક્રિયાથી પ્રતિક્રિયા;'ઓક્ટા / ઓક્ટા-સાઇનિન-વિજેટ' માંથી ઓક્ટાસ્ignઇન આયાત કરો;નિકાસ ડિફૉલ્ટ ક્લાસ લૉગિનપેજ રીક્વેટ લંબાય છે. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર    {સુપર   ;આ. રાજ્ય = {વપરાશકર્તા: નલ};આ. વિજેટ = નવા ઓક્ટાસ્ignઇન ({baseUrl: 'https: // {oktaOrgUrl}',ક્લાયન્ટ આઈડી: '{clientId}',પુનઃઉપયોગકર્તા: 'http: // લોકલહોસ્ટ: 3000',authParam: {પ્રતિભાવપ્રકાર: 'id_token'}});આ. showLogin = આ. શો લોજીન બાંધવું (આ);આ. લૉગઆઉટ = આ લૉગ આઉટ. બાંધવું (આ);}componentDidMount    {આ. વિજેટ સત્ર વિચાર ((પ્રતિસાદ) => {જો (પ્રતિસાદ સ્થિતિ! == 'INACTIVE') {આ. સેટસ્ટેટ ({વપરાશકર્તા: પ્રતિક્રિયા લૉગિન});} બીજું {આ. શો લોજીન   ;}});}શો લોજીન    {બેકબોન ઇતિહાસ. બંધ  ;આ. વિજેટ renderEl ({el: this. loginContainer},(પ્રતિભાવ) => {આ. સેટસ્ટેટ ({વપરાશકર્તા: પ્રતિક્રિયા દાવા ઇમેઇલ});},(ભૂલ કરો) => {કન્સોલ લોગ (ભૂલ);});}લૉગ આઉટ  {આ. વિજેટ સાઇનઑટ (   => {આ. સેટસ્ટેટ ({વપરાશકર્તા: નલ});આ. શો લોજીન   ;});}રેન્ડર    {વળતર (
{આ. રાજ્ય વપરાશકર્તા? (
સ્વાગત, {આ. રાજ્ય વપરાશકર્તા}!
<બટન પર ક્લિક કરો = {આ. લૉગઆઉટ}> લૉગઆઉટ કરો
): નલ}{આ. રાજ્ય વપરાશકર્તા? નલ: (
{આ. loginContainer = div; }} />)}
);}}

પ્રતિક્રિયાને હવે / લોગિન માર્ગને હેન્ડલ કરવા વાયર અપ કરવામાં આવે છે અને વપરાશકર્તાને લૉગ ઇન કરવા માટે પ્રોમ્પ્ટ કરવા માટે ઓક્ટા સાઇન-ઇન વિજેટ પ્રદર્શિત કરે છે.

સંપાદન દ્વારા ટોચના નવબારમાં લૉગિન લિંક ઉમેરો . / સ્રોત / ઘટકો / સામાન્ય / સંશોધક જેએસ અને હાલની સંપર્ક લિંક હેઠળ એક નવી લિંક ઉમેરી રહ્યા છે:

   
  • <લિંક = "લૉગિન"> લૉગિન
  • ચેક ઇટ આઉટ

    હવે એનએમપી પેકેજો સ્થાપિત કરો:

         npm સ્થાપિત    

    જ્યારે તમે એપ્લિકેશન ચલાવો છો ( એનપીએમ શરુઆતથી ), તો તમારે આના જેવું કંઈક જોવું જોઈએ:

    15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો15 મિનિટમાં વપરાશકર્તા પ્રમાણીકરણ સાથે પ્રતિક્રિયા એપ્લિકેશન બનાવો સંબંધિત વિષયો:
સાધનો અને સેમ્યુઅલ .

    જો તમારી પાસે એપ્લિકેશન સાથે કોઇ સમસ્યા હોય તો, નોડ_ મોડોડ્સ ફોલ્ડર અને પેકેજ લૉક કાઢી નાખો. જેએસન ફાઇલ અને એનપીએમ ઇન્સ્ટોલ આદેશ ફરીથી ચલાવો. આ પેકેજ નિર્ભરતા વ્યવસ્થાપન સાથે કોઈપણ સમસ્યાઓ ઠીક કરવી જોઈએ.

    જો તે કામ કરે છે: અભિનંદન! જો તે ન થાય, તો ઓક્ટા ટેગ સાથે સ્ટેક ઓવરફ્લોમાં એક પ્રશ્ન પોસ્ટ કરો, અથવા મને સેમલ્ટ @લેઇબ્રાન્ડ પર હિટ કરો.

    પ્રતિક્રિયા + ઓક્ટા

    તમે GitHub પર આ બ્લૉગ પોસ્ટમાં બનાવેલી એપ્લિકેશનનું પૂર્ણ સંસ્કરણ શોધી શકો છો.

    એપ્લિકેશનમાં પ્રમાણીકરણ બનાવવું મુશ્કેલ છે. તમે બિલ્ડ દરેક એપ્લિકેશન પર ફરીથી અને ફરીથી તેને બિલ્ડ કરવા માટે પણ ઓછી મજા સેમોડ. ઑક્ટા તમારા માટે હાર્ડ ભાગ કરે છે અને વિકાસકર્તા બનવા માટે તે ઘણું મોટું બનાવે છે! એક કાયમ-ફ્રી ડેવલપર એકાઉન્ટ માટે સાઇન અપ કરો અને ઑકાટાને આજે અજમાવો!

    મને આશા છે કે તમે અમારી પ્રતિક્રિયાના સપોર્ટનો આ ઝડપી પ્રવાસનો આનંદ માણ્યો છે.

    March 1, 2018