உள்நுழைவுகளை நெறிப்படுத்துதல்: முகப்பு நற்சான்றிதழ் மேலாண்மை API பற்றிய ஒரு ஆழமான பார்வை

டிஜிட்டல் உலகில், உள்நுழைவுப் படிவம் என்பது மிகவும் முக்கியமான மற்றும் சவாலான பயனர் தொடர்புகளில் ஒன்றாகும். இது உங்கள் பயன்பாட்டிற்கான நுழைவாயில், ஆனால் இது குறிப்பிடத்தக்க உராய்வுப் புள்ளியாகவும் உள்ளது. பயனர்கள் கடவுச்சொற்களை மறந்துவிடுகிறார்கள், பயனர்பெயர்களை தவறாகத் தட்டச்சு செய்கிறார்கள், மேலும் விரக்தியில் தங்கள் ஷாப்பிங் கார்ட்களையோ அல்லது சேவைகளையோ கைவிடுகிறார்கள். டெவலப்பர்களுக்கு, அங்கீகாரத்தை நிர்வகிப்பது ஒரு தடையற்ற பயனர் அனுபவத்தை (UX) வழங்குவதற்கும் வலுவான பாதுகாப்பை உறுதி செய்வதற்கும் இடையே ஒரு சிக்கலான சமநிலைப்படுத்தும் செயலாகும்.

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

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

நற்சான்றிதழ் மேலாண்மை API என்றால் என்ன?

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

இது ஒரு சுருக்க அடுக்காக செயல்படுகிறது, டெவலப்பர்கள் வெவ்வேறு வகையான நற்சான்றிதழ்களைக் கையாளும் முறையை எளிதாக்குகிறது. மூல பயனர்பெயர் மற்றும் கடவுச்சொல் புலங்களுடன் மட்டும் கையாள்வதற்குப் பதிலாக, இந்த API கட்டமைக்கப்பட்ட நற்சான்றிதழ் பொருட்களுடன் செயல்படுகிறது. இது மூன்று முதன்மை வகைகளை ஆதரிக்கிறது:

• கடவுச்சொல் நற்சான்றிதழ் (PasswordCredential): பாரம்பரிய பயனர்பெயர் மற்றும் கடவுச்சொல் கலவை.
• கூட்டாட்சி நற்சான்றிதழ் (FederatedCredential): கூகிள், ஃபேஸ்புக் அல்லது ஒரு கார்ப்பரேட் SAML வழங்குநர் போன்ற ஒரு கூட்டாட்சி அடையாள வழங்குநரிடமிருந்து ஒரு அடையாள உறுதிமொழி.
• பொது விசை நற்சான்றிதழ் (PublicKeyCredential): வெப்ஆத்என் (WebAuthn) தரநிலை வழியாக கடவுச்சொல் இல்லாத அங்கீகாரத்திற்குப் பயன்படுத்தப்படும் ஒரு சக்திவாய்ந்த, ஃபிஷிங்-எதிர்ப்பு நற்சான்றிதழ் வகை. இது பெரும்பாலும் பயோமெட்ரிக்ஸ் (கைரேகை, முக ID) அல்லது வன்பொருள் பாதுகாப்பு விசைகளை உள்ளடக்கியது.

ஒரு ஒற்றை, ஒருங்கிணைந்த இடைமுகத்தை வழங்குவதன் மூலம்—the `navigator.credentials` பொருள்—இந்த API நீங்கள் அதிநவீன அங்கீகார செயல்முறைகளை உருவாக்க அனுமதிக்கிறது, அவை நம்பமுடியாத அளவிற்கு பயனர் நட்பு மற்றும் பாதுகாப்பானவை, அடிப்படை நற்சான்றிதழ் வகையைப் பொருட்படுத்தாமல்.

உங்கள் பயன்பாட்டிற்கு நற்சான்றிதழ் மேலாண்மை API ஏன் தேவை?

CredMan API-ஐ ஒருங்கிணைப்பது என்பது சமீபத்திய தொழில்நுட்பத்தை ஏற்றுக்கொள்வது மட்டுமல்ல; இது உங்கள் பயனர்களுக்கும் உங்கள் மேம்பாட்டுக் குழுவிற்கும் உறுதியான நன்மைகளை வழங்குவதாகும்.

1. தீவிரமாக மேம்படுத்தப்பட்ட பயனர் அனுபவம் (UX)

இது விவாதத்திற்குரிய வகையில் மிக முக்கியமான நன்மை. இந்த API உள்நுழைவு உராய்வை நேரடியாகக் கையாள்கிறது.

• ஒரு-தொடு உள்நுழைவு: திரும்பி வரும் பயனர்களுக்கு, உலாவி ஒரு கணக்குத் தெரிவு UI-ஐ வழங்க முடியும், இது அவர்கள் ஒரு கடவுச்சொல்லைத் தட்டச்சு செய்யாமலேயே ஒரே ஒரு தொடுதல் அல்லது கிளிக்கில் உள்நுழைய அனுமதிக்கிறது.
• தானியங்கி உள்நுழைவு: ஒரு திரும்பி வரும் பயனர் உங்கள் தளத்தைப் பார்வையிட்டவுடன் தானாகவே உள்நுழைய நீங்கள் API-ஐ உள்ளமைக்கலாம், இது ஒரு சொந்த மொபைல் பயன்பாடு போன்ற தடையற்ற அனுபவத்தை வழங்குகிறது. இது வெளிப்படையாக வெளியேறாத பயனர்களுக்கு ஏற்றது.
• படிவம் கைவிடுதல் குறைக்கப்பட்டது: உள்நுழைவு மற்றும் பதிவு செயல்முறையை எளிதாக்குவதன் மூலம், நீங்கள் பயனர்கள் மீதான அறிவாற்றல் சுமையைக் குறைக்கிறீர்கள், இது அதிக நிறைவு விகிதங்கள் மற்றும் சிறந்த பயனர் தக்கவைப்பிற்கு வழிவகுக்கிறது.
• ஒருங்கிணைந்த கூட்டாட்சி உள்நுழைவுகள்: இது "Sign in with..." அனுபவத்தை நெறிப்படுத்துகிறது. பாப்-அப்கள் மற்றும் திசைதிருப்பல்களை கைமுறையாக நிர்வகிப்பதற்குப் பதிலாக, API ஒரு கூட்டாட்சி அடையாளத்தைக் கோருவதற்கான ஒரு நிலையான வழியை வழங்குகிறது, அதை உலாவி மத்தியஸ்தம் செய்ய முடியும்.

2. மேம்படுத்தப்பட்ட பாதுகாப்பு நிலை

UX-ஐ மேம்படுத்தும் அதே வேளையில், இந்த API குறிப்பிடத்தக்க பாதுகாப்பு மேம்பாடுகளையும் கொண்டுவருகிறது.

• ஃபிஷிங் எதிர்ப்பு: API மூலம் நிர்வகிக்கப்படும் நற்சான்றிதழ்கள் ஒரு குறிப்பிட்ட மூலத்துடன் (நெறிமுறை, டொமைன், மற்றும் போர்ட்) பிணைக்கப்பட்டுள்ளன. இதன் பொருள், `yourbank.com` க்கான நற்சான்றிதழ்களை `your-bank.com` போன்ற ஒரு ஃபிஷிங் தளத்தில் நிரப்ப உலாவி முன்வராது, இது பாரம்பரிய கடவுச்சொல் தானாக நிரப்புதல் பாதிக்கப்படக்கூடிய ஒரு பொதுவான தாக்குதல் திசையன் ஆகும்.
• கடவுச்சொல் இல்லாததற்கான நுழைவாயில்: இந்த API, WebAuthn (`PublicKeyCredential`) க்கான நியமிக்கப்பட்ட நுழைவுப் புள்ளியாகும். கடவுச்சொல் அடிப்படையிலான உள்நுழைவுகளுக்கு இதை ஏற்றுக்கொள்வதன் மூலம், எதிர்காலத்தில் கடவுச்சொல் இல்லாத, பயோமெட்ரிக், அல்லது வன்பொருள் விசை அங்கீகாரத்தை எளிதாகச் சேர்ப்பதற்கான அடித்தளத்தை நீங்கள் உருவாக்குகிறீர்கள்.
• தரப்படுத்தப்பட்டது மற்றும் சரிபார்க்கப்பட்டது: இது முக்கியமான நற்சான்றிதழ்களைக் கையாளுவதற்கான உலாவி-சரிபார்க்கப்பட்ட, தரப்படுத்தப்பட்ட இடைமுகத்தை வழங்குகிறது, இது பயனர் தரவை வெளிப்படுத்தக்கூடிய செயலாக்கப் பிழைகளின் அபாயத்தைக் குறைக்கிறது.

3. எளிமைப்படுத்தப்பட்ட மற்றும் எதிர்காலத்திற்கேற்ற மேம்பாடு

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

• சுருக்கப்பட்ட சிக்கலானது: நற்சான்றிதழ்கள் எங்கே சேமிக்கப்படுகின்றன (உலாவியின் உள் மேலாளர், OS-நிலை கீசெயின், முதலியன) என்பதைப் பற்றிய பிரத்யேக விவரங்களைப் பற்றி நீங்கள் கவலைப்படத் தேவையில்லை. நீங்கள் வெறுமனே ஒரு கோரிக்கையை வைக்கிறீர்கள், மீதமுள்ளவற்றை உலாவி கையாளுகிறது.
• தூய்மையான குறியீட்டுத் தளம்: இது உள்நுழைவு மற்றும் பதிவிற்கான குழப்பமான படிவம்-ஸ்கிராப்பிங் மற்றும் நிகழ்வு-கையாளுதல் தர்க்கத்திலிருந்து விலகிச் செல்ல உதவுகிறது, இது மேலும் பராமரிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது.
• முன்னோக்கிய இணக்கத்தன்மை: புதிய அங்கீகார முறைகள் உருவாகும்போது, அவற்றை நற்சான்றிதழ் மேலாண்மை API கட்டமைப்பில் ஒருங்கிணைக்க முடியும். இந்தத் தரத்தின் மீது உருவாக்குவதன் மூலம், உங்கள் பயன்பாடு வலை அடையாளத்தின் எதிர்காலத்திற்கு சிறப்பாகத் தயாராகிறது.

முக்கிய கருத்துக்கள் மற்றும் API ஆழமான பார்வை

முழு API-யும் `navigator.credentials` பொருளைச் சுற்றியே சுழல்கிறது, இது நற்சான்றிதழ்களை நிர்வகிப்பதற்கான முறைகளின் தொகுப்பை வெளிப்படுத்துகிறது. மிக முக்கியமானவற்றை உடைத்துப் பார்ப்போம்.

`get()` முறை: உள்நுழைவிற்கான நற்சான்றிதழ்களை மீட்டெடுத்தல்

இது உள்நுழைவு செயல்முறையின் முக்கிய அம்சம். ஒரு பயனரை அங்கீகரிக்கப் பயன்படும் நற்சான்றிதழ்களை உலாவியிடம் கேட்க நீங்கள் `navigator.credentials.get()` ஐப் பயன்படுத்துகிறீர்கள். இது ஒரு நற்சான்றிதழ் பொருள் (`Credential` object) அல்லது நற்சான்றிதழ் எதுவும் கண்டுபிடிக்கப்படவில்லை அல்லது பயனர் கோரிக்கையை ரத்துசெய்தால் `null` உடன் தீர்க்கப்படும் ஒரு வாக்குறுதியை (`Promise`) வழங்குகிறது.

`get()` இன் சக்தி அதன் உள்ளமைவுப் பொருளில் உள்ளது. ஒரு முக்கிய பண்பு `mediation` ஆகும், இது பயனர் தொடர்பு அளவைக் கட்டுப்படுத்துகிறது:

• mediation: 'silent': இது தானியங்கி உள்நுழைவு செயல்முறைக்கானது. இது எந்த பயனர் தொடர்பும் இல்லாமல் நற்சான்றிதழைப் பெற உலாவிக்குச் சொல்கிறது. இதற்கு ஒரு UI தூண்டுதல் தேவைப்பட்டால் (எ.கா., பயனர் பல கணக்குகளில் உள்நுழைந்துள்ளார்), கோரிக்கை மௌனமாகத் தோல்வியடையும். ஒரு பயனர் செயலில் அமர்வைக் கொண்டிருக்கிறாரா என்பதைப் பக்கம் ஏற்றப்படும்போது சரிபார்க்க இது சிறந்தது.
• mediation: 'optional': இது இயல்புநிலை. தேவைப்பட்டால், உலாவி ஒரு கணக்குத் தெரிவு போன்ற ஒரு UI-ஐக் காட்டலாம். இது ஒரு பயனர்-தொடங்கிய உள்நுழைவுப் பொத்தானுக்கு ஏற்றது.
• mediation: 'required': இது உலாவியை எப்போதும் ஒரு UI-ஐக் காட்டும்படி கட்டாயப்படுத்துகிறது, இது நீங்கள் பயனரை வெளிப்படையாக மீண்டும் அங்கீகரிக்க விரும்பும் பாதுகாப்பு-உணர்திறன் சூழல்களில் பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு: கடவுச்சொல் நற்சான்றிதழைக் கோருதல்

            async function signInUser() {
  try {
    const cred = await navigator.credentials.get({
      password: true,
      mediation: 'optional' // or 'silent' for auto-login
    });

    if (cred) {
      // A credential object was returned
      // Send it to the server for verification
      await serverLogin(cred);
    } else {
      // User cancelled the prompt or no credentials available
      // Fallback to manual form entry
    }
  } catch (e) {
    console.error('Error getting credential:', e);
  }
}
            

              
                Copy
              
            
          

`create()` மற்றும் `store()` முறைகள்: நற்சான்றிதழ்களைச் சேமித்தல்

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

`navigator.credentials.create()` முதன்மையாக ஒரு புதிய நற்சான்றிதழை உருவாக்கப் பயன்படுகிறது, குறிப்பாக `PublicKeyCredential` (WebAuthn) க்கு, அங்கு ஒரு விசை ஜோடி உருவாக்கப்படுகிறது. கடவுச்சொற்களுக்கு, இது ஒரு `PasswordCredential` பொருளை உருவாக்குகிறது, அதை நீங்கள் `navigator.credentials.store()` க்கு அனுப்பலாம்.

`navigator.credentials.store()` ஒரு நற்சான்றிதழ் பொருளை எடுத்து அதைச் சேமிக்க உலாவியைத் தூண்டுகிறது. ஒரு வெற்றிகரமான பதிவுக்குப் பிறகு பயனர்பெயர்/கடவுச்சொல் விவரங்களைச் சேமிப்பதற்கான மிகவும் பொதுவான முறை இதுவாகும்.

எடுத்துக்காட்டு: பதிவுக்குப் பிறகு ஒரு புதிய கடவுச்சொல் நற்சான்றிதழைச் சேமித்தல்

            async function handleRegistration(form) {
  // 1. Submit form data to your server
  const response = await serverRegister(form);

  // 2. If registration is successful, create a credential object
  if (response.ok) {
    const newCredential = new PasswordCredential({
      id: form.username.value,
      password: form.password.value,
      name: form.displayName.value,
      iconURL: 'https://example.com/path/to/icon.png'
    });

    // 3. Ask the browser to store it
    try {
      await navigator.credentials.store(newCredential);
      console.log('Credential stored successfully!');
    } catch (e) {
      console.error('Error storing credential:', e);
    }
  }
}
            

              
                Copy
              
            
          

`preventSilentAccess()` முறை: வெளியேறுதலைக் கையாளுதல்

இந்த முறை ஒரு முழுமையான மற்றும் பாதுகாப்பான அங்கீகார வாழ்க்கைச் சுழற்சிக்கு முக்கியமானது. ஒரு பயனர் உங்கள் பயன்பாட்டிலிருந்து வெளிப்படையாக வெளியேறும்போது, அவர்களின் அடுத்த வருகையின்போது `mediation: 'silent'` செயல்முறை அவர்களைத் தானாகவே மீண்டும் உள்நுழைய வைப்பதைத் தடுக்க விரும்புகிறீர்கள்.

`navigator.credentials.preventSilentAccess()` ஐ அழைப்பது, பயனர் அடுத்த முறை பயனர் தொடர்பு மூலம் (அதாவது, மௌனமாக இல்லாமல்) உள்நுழையும் வரை மௌனமான, தானியங்கி உள்நுழைவு அம்சத்தை முடக்குகிறது. இது ஒரு எளிய, ஃபயர்-அண்ட்-ஃபர்கெட் வாக்குறுதி.

எடுத்துக்காட்டு: வெளியேறுதல் செயல்முறை

            async function handleSignOut() {
  // 1. Invalidate the session on your server
  await serverLogout();

  // 2. Prevent silent re-login on the client
  if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    await navigator.credentials.preventSilentAccess();
  }

  // 3. Redirect to the homepage or sign-in page
  window.location.href = '/';
}
            

              
                Copy
              
            
          

நடைமுறைச் செயலாக்கம்: ஒரு முழுமையான அங்கீகார செயல்முறையை உருவாக்குதல்

இந்தக் கருத்துக்களை ஒரு வலுவான, முழுமையான அங்கீகார அனுபவத்தில் இணைப்போம்.

படி 1: அம்சக் கண்டறிதல்

முதலில், API-ஐப் பயன்படுத்த முயற்சிக்கும் முன் உலாவி அதை ஆதரிக்கிறதா என்பதை எப்போதும் சரிபார்க்கவும். இது பழைய உலாவிகளுக்கு நளினமான சீரழிவை உறுதி செய்கிறது.

            const isCredManApiSupported = ('credentials' in navigator);

if (isCredManApiSupported) {
  // Proceed with API-based flows
} else {
  // Fallback to traditional form logic
}
            

              
                Copy
              
            
          

படி 2: தானியங்கி உள்நுழைவு செயல்முறை (பக்கம் ஏற்றப்படும்போது)

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

            window.addEventListener('load', async () => {
  if (!isCredManApiSupported) return;

  try {
    const cred = await navigator.credentials.get({ 
      password: true, 
      mediation: 'silent' 
    });

    if (cred) {
      console.log('Silent sign-in successful. Verifying with server...');
      // Send the credential to your backend to validate and create a session
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: cred.id, password: cred.password })
      });

      if (response.ok) {
        // Update UI to reflect logged-in state
        updateUIAfterLogin();
      }
    }
    // If 'cred' is null, do nothing. The user will see the standard sign-in page.
  } catch (e) {
    console.info('Silent get() failed. This is expected if user is signed out.', e);
  }
});
            

              
                Copy
              
            
          

படி 3: பயனர்-தொடங்கிய உள்நுழைவு செயல்முறை (பொத்தானை அழுத்தும் போது)

பயனர் "Sign In" பொத்தானைக் கிளிக் செய்யும்போது, நீங்கள் ஊடாடும் செயல்முறையைத் தூண்டுகிறீர்கள்.

            const signInButton = document.getElementById('signin-button');

signInButton.addEventListener('click', async () => {
  if (!isCredManApiSupported) {
    // Let the traditional form submission handle it
    return;
  }

  try {
    const cred = await navigator.credentials.get({ 
      password: true, 
      mediation: 'optional' 
    });

    if (cred) {
      // User selected an account from the browser's account chooser
      document.getElementById('username').value = cred.id;
      document.getElementById('password').value = cred.password;
      // Programmatically submit the form or send via fetch
      document.getElementById('login-form').submit();
    } else {
      // User closed the account chooser. Let them type manually.
      console.log('User cancelled the sign-in prompt.');
    }
  } catch (e) {
    console.error('Error during user-initiated sign-in:', e);
  }
});
            

              
                Copy
              
            
          

படி 4: பதிவு மற்றும் நற்சான்றிதழ் சேமிப்பு செயல்முறை

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

            const registrationForm = document.getElementById('registration-form');

registrationForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Assume server-side registration is successful
  // ...server logic here...

  if (isCredManApiSupported) {
    const form = event.target;
    const cred = new PasswordCredential({
      id: form.username.value,
      password: form.password.value,
      name: form.fullName.value
    });

    try {
      await navigator.credentials.store(cred);
      // Now redirect to the user's dashboard
      window.location.href = '/dashboard';
    } catch (e) {
      console.warn('Credential could not be stored.', e);
      // Still redirect, as registration was successful
      window.location.href = '/dashboard';
    }
  } else {
    // For unsupported browsers, just redirect
    window.location.href = '/dashboard';
  }
});
            

              
                Copy
              
            
          

படி 5: வெளியேறுதல் செயல்முறை

இறுதியாக, ஒரு சுத்தமான வெளியேறுதல் செயல்முறையை உறுதி செய்யவும்.

            const signOutButton = document.getElementById('signout-button');
signOutButton.addEventListener('click', async () => {
  // 1. Tell the server to end the session
  await fetch('/api/logout', { method: 'POST' });

  // 2. Prevent automatic sign-in on the next visit
  if (isCredManApiSupported) {
    try {
      await navigator.credentials.preventSilentAccess();
    } catch(e) {
       console.error("Could not prevent silent access.", e)
    }
  }
  
  // 3. Redirect the user
  window.location.href = '/signed-out';
});
            

              
                Copy
              
            
          

கூட்டாட்சி அடையாள வழங்குநர்களுடன் ஒருங்கிணைத்தல்

API-யின் நேர்த்தி கூட்டாட்சி உள்நுழைவுகளுக்கும் நீண்டுள்ளது. சிக்கலான SDK-கள் மற்றும் பாப்அப் சாளரங்களை நேரடியாக நிர்வகிப்பதற்குப் பதிலாக, நீங்கள் `FederatedCredential` வகையைப் பயன்படுத்தலாம். உங்கள் தளம் ஆதரிக்கும் அடையாள வழங்குநர்களை நீங்கள் குறிப்பிடுகிறீர்கள், மேலும் உலாவி அவற்றை அதன் சொந்த UI-ல் வழங்க முடியும்.

            async function federatedSignIn() {
  try {
    const fedCred = await navigator.credentials.get({
      federated: {
        providers: ['https://accounts.google.com', 'https://www.facebook.com'],
        // You can also include OpenID Connect parameters
        // protocols: ['openidconnect'],
        // clientId: 'your-client-id.apps.googleusercontent.com'
      }
    });

    if (fedCred) {
      // fedCred.id contains the user's unique ID from the provider
      // fedCred.provider contains the origin of the provider (e.g., 'https://accounts.google.com')
      // Send this token/ID to your backend to verify and create a session
      await serverFederatedLogin(fedCred.id, fedCred.provider);
    }
  } catch (e) {
    console.error('Federated sign-in failed:', e);
  }
}
            

              
                Copy
              
            
          

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

எதிர்காலம் கடவுச்சொல் இல்லாதது: வெப்ஆத்என் ஒருங்கிணைப்பு

நற்சான்றிதழ் மேலாண்மை API-யின் உண்மையான சக்தி, வெப்ஆத்என்-க்கான கிளையன்ட் பக்க நுழைவுப் புள்ளியாக அதன் பங்கு ஆகும். நீங்கள் கடவுச்சொல் இல்லாத அங்கீகாரத்தை செயல்படுத்தத் தயாராக இருக்கும்போது, நீங்கள் முற்றிலும் புதிய API-ஐக் கற்றுக்கொள்ளத் தேவையில்லை. நீங்கள் வெறுமனே `publicKey` விருப்பத்துடன் `create()` மற்றும் `get()` ஐப் பயன்படுத்துகிறீர்கள்.

வெப்ஆத்என் செயல்முறை மிகவும் சிக்கலானது, உங்கள் சேவையகத்துடன் ஒரு கிரிப்டோகிராஃபிக் சவால்-பதில் பொறிமுறையை உள்ளடக்கியது, ஆனால் முகப்பு தொடர்பு நீங்கள் ஏற்கனவே கடவுச்சொற்களுக்குப் பயன்படுத்தும் அதே API மூலம் நிர்வகிக்கப்படுகிறது.

எளிமைப்படுத்தப்பட்ட வெப்ஆத்என் பதிவு எடுத்துக்காட்டு:

            // 1. Get a challenge from your server
const challenge = await fetch('/api/webauthn/register-challenge').then(r => r.json());

// 2. Use navigator.credentials.create() with publicKey options
const newPublicKeyCred = await navigator.credentials.create({
  publicKey: challenge
});

// 3. Send the new credential back to the server for verification and storage
await fetch('/api/webauthn/register-verify', {
  method: 'POST',
  body: JSON.stringify(newPublicKeyCred)
});
            

              
                Copy
              
            
          

இன்று CredMan API-ஐப் பயன்படுத்துவதன் மூலம், மேலும் பாதுகாப்பான, ஃபிஷிங்-எதிர்ப்பு அங்கீகார முறைகளை நோக்கிய தவிர்க்க முடியாத மாற்றத்திற்கு உங்கள் பயன்பாட்டைத் தயாராக வடிவமைக்கிறீர்கள்.

உலாவி ஆதரவு மற்றும் பாதுகாப்பு பரிசீலனைகள்

உலாவி இணக்கத்தன்மை

நற்சான்றிதழ் மேலாண்மை API ஆனது Chrome, Firefox, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்படுகிறது. இருப்பினும், Safari-ல் ஆதரவு குறைவாக உள்ளது, குறிப்பாக சில அம்சங்களுக்கு. சமீபத்திய தகவல்களுக்கு Can I Use... போன்ற ஒரு இணக்கத்தன்மை வளத்தை எப்போதும் சரிபார்த்து, உங்கள் நிலையான HTML படிவங்களை முழுமையாகச் செயல்பட வைப்பதன் மூலம் உங்கள் பயன்பாடு நளினமாகச் சீரழிவதை உறுதிசெய்யவும்.

முக்கியமான பாதுகாப்பு சிறந்த நடைமுறைகள்

• HTTPS கட்டாயம்: முக்கியமான தகவல்களைக் கையாளும் பல நவீன வலை API-களைப் போலவே, நற்சான்றிதழ் மேலாண்மை API பாதுகாப்பான சூழல்களில் மட்டுமே கிடைக்கிறது. உங்கள் தளம் HTTPS வழியாக வழங்கப்பட வேண்டும்.
• சேவையகப் பக்க சரிபார்ப்பு பேரம் பேச முடியாதது: இந்த API ஒரு கிளையன்ட் பக்க வசதி. இது பயனரிடமிருந்து உங்கள் பயன்பாட்டிற்கு நற்சான்றிதழ்களைப் பெற உதவுகிறது. இது அவற்றை சரிபார்க்காது. ஒருபோதும் கிளையன்ட்டை நம்ப வேண்டாம். அனைத்து நற்சான்றிதழ்களும், கடவுச்சொல் அடிப்படையிலானதாக இருந்தாலும் அல்லது கிரிப்டோகிராஃபிக் ஆக இருந்தாலும், ஒரு அமர்வு வழங்கப்படுவதற்கு முன்பு உங்கள் பின்தளத்தால் பாதுகாப்பாக சரிபார்க்கப்பட வேண்டும்.
• பயனர் நோக்கத்தை மதிக்கவும்: `mediation: 'silent'` ஐப் பொறுப்புடன் பயன்படுத்தவும். இது அமர்வுகளை மீட்டெடுப்பதற்காக, பயனர்களைக் கண்காணிப்பதற்காக அல்ல. எப்போதும் `preventSilentAccess()` ஐ அழைக்கும் ஒரு வலுவான வெளியேறுதல் செயல்முறையுடன் அதை இணைக்கவும்.
• `null` ஐ நளினமாகக் கையாளவும்: `null` க்கு தீர்க்கப்படும் ஒரு `get()` அழைப்பு ஒரு பிழை அல்ல. இது செயல்முறையின் ஒரு சாதாரண பகுதியாகும், அதாவது பயனருக்கு சேமிக்கப்பட்ட நற்சான்றிதழ்கள் இல்லை அல்லது அவர்கள் உலாவி தூண்டுதலை ரத்து செய்துவிட்டார்கள். உங்கள் UI அவர்களை கைமுறை உள்ளீட்டுடன் தடையின்றி தொடர அனுமதிக்க வேண்டும்.

முடிவுரை

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

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