জাভাস্ক্রিপ্ট দিয়ে ইয়াহু ব্যবহার করে প্রমাণীকরণ করুন

আপনি আপনার ব্যবহারকারীদেরকে Yahoo-এর মতো OAuth প্রদানকারী ব্যবহার করে Firebase-এর সাথে প্রমাণীকরণ করতে দিতে পারেন আপনার অ্যাপে জেনেরিক OAuth লগইনকে একীভূত করে Firebase SDK ব্যবহার করে শেষ থেকে শেষ সাইন-ইন প্রবাহ চালাতে।

আপনি শুরু করার আগে

Yahoo অ্যাকাউন্ট ব্যবহার করে ব্যবহারকারীদের সাইন ইন করতে, আপনাকে প্রথমে আপনার Firebase প্রকল্পের জন্য সাইন-ইন প্রদানকারী হিসাবে Yahoo সক্ষম করতে হবে:

  1. আপনার JavaScript প্রকল্পে Firebase যোগ করুন
  2. Firebase কনসোলে , Auth বিভাগটি খুলুন।
  3. সাইন ইন পদ্ধতি ট্যাবে, Yahoo প্রদানকারী সক্ষম করুন।
  4. সেই প্রদানকারীর ডেভেলপার কনসোল থেকে প্রদানকারী কনফিগারেশনে ক্লায়েন্ট আইডি এবং ক্লায়েন্ট সিক্রেট যোগ করুন:
    1. একটি Yahoo OAuth ক্লায়েন্ট নিবন্ধন করতে, Yahoo-এর সাথে একটি ওয়েব অ্যাপ্লিকেশন নিবন্ধন করার বিষয়ে Yahoo বিকাশকারী ডকুমেন্টেশন অনুসরণ করুন৷

      দুটি OpenID Connect API অনুমতি নির্বাচন করতে ভুলবেন না: profile এবং email

    2. এই প্রোভাইডারদের সাথে অ্যাপ রেজিস্টার করার সময়, আপনার প্রোজেক্টের জন্য *.firebaseapp.com ডোমেনটিকে আপনার অ্যাপের রিডাইরেক্ট ডোমেন হিসেবে রেজিস্টার করতে ভুলবেন না।
  5. Save এ ক্লিক করুন।

Firebase SDK দিয়ে সাইন-ইন ফ্লো পরিচালনা করুন

আপনি যদি একটি ওয়েব অ্যাপ তৈরি করেন, তাহলে আপনার ব্যবহারকারীদের Yahoo অ্যাকাউন্ট ব্যবহার করে Firebase-এর মাধ্যমে প্রমাণীকরণ করার সবচেয়ে সহজ উপায় হল Firebase JavaScript SDK-এর মাধ্যমে সম্পূর্ণ সাইন-ইন প্রবাহ পরিচালনা করা।

Firebase JavaScript SDK দিয়ে সাইন-ইন প্রবাহ পরিচালনা করতে, এই ধাপগুলি অনুসরণ করুন:

  1. প্রদানকারী আইডি yahoo.com ব্যবহার করে একটি OAuthProvider- এর একটি উদাহরণ তৈরি করুন।

    WebWeb
    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. ঐচ্ছিক : অতিরিক্ত কাস্টম OAuth প্যারামিটার নির্দিষ্ট করুন যা আপনি OAuth অনুরোধের সাথে পাঠাতে চান।

    WebWeb
    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  
    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Yahoo সমর্থন করে প্যারামিটারগুলির জন্য, Yahoo OAuth ডকুমেন্টেশন দেখুন। মনে রাখবেন যে আপনি setCustomParameters() দিয়ে Firebase-প্রয়োজনীয় প্যারামিটার পাস করতে পারবেন না। এই প্যারামিটারগুলি হল client_id , redirect_uri , response_type , scope এবং state

  3. ঐচ্ছিক : profile এবং email বাইরে অতিরিক্ত OAuth 2.0 স্কোপ নির্দিষ্ট করুন যা আপনি প্রমাণীকরণ প্রদানকারীর কাছ থেকে অনুরোধ করতে চান। যদি আপনার অ্যাপ্লিকেশনের জন্য Yahoo APIs থেকে ব্যক্তিগত ব্যবহারকারীর ডেটা অ্যাক্সেসের প্রয়োজন হয়, তাহলে আপনাকে Yahoo বিকাশকারী কনসোলে API অনুমতিগুলির অধীনে Yahoo API-কে অনুমতির অনুরোধ করতে হবে। অনুরোধ করা OAuth স্কোপগুলিকে অবশ্যই অ্যাপের API অনুমতিগুলিতে প্রি-কনফিগার করাগুলির সাথে হুবহু মিলে যেতে হবে। উদাহরণস্বরূপ, যদি ব্যবহারকারীর পরিচিতিগুলিতে পঠন/লেখার অ্যাক্সেসের অনুরোধ করা হয় এবং অ্যাপের API অনুমতিগুলিতে পূর্ব-কনফিগার করা হয়, তাহলে শুধুমাত্র পঠনযোগ্য OAuth স্কোপ sdct-r পরিবর্তে sdct-w পাস করতে হবে। অন্যথায়, প্রবাহ ব্যর্থ হবে এবং একটি ত্রুটি শেষ ব্যবহারকারীকে দেখানো হবে।

    WebWeb
    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');
    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    আরও জানতে, Yahoo স্কোপ ডকুমেন্টেশন পড়ুন।

  4. OAuth প্রদানকারী অবজেক্ট ব্যবহার করে Firebase দিয়ে প্রমাণীকরণ করুন। আপনি আপনার ব্যবহারকারীদের একটি পপ-আপ উইন্ডো খুলে বা সাইন-ইন পৃষ্ঠায় পুনঃনির্দেশ করে তাদের Yahoo অ্যাকাউন্টের সাথে সাইন ইন করতে অনুরোধ করতে পারেন। রিডাইরেক্ট পদ্ধতি মোবাইল ডিভাইসে পছন্দ করা হয়।

    • একটি পপ-আপ উইন্ডো দিয়ে সাইন ইন করতে, signInWithPopup কল করুন:

      WebWeb
      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • সাইন-ইন পৃষ্ঠায় পুনঃনির্দেশ করে সাইন ইন করতে, signInWithRedirect কল করুন:

    signInWithRedirect , linkWithRedirect , অথবা reauthenticateWithRedirect ব্যবহার করার সময় সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন৷

      firebase.auth().signInWithRedirect(provider);
      

    ব্যবহারকারী সাইন-ইন সম্পূর্ণ করে পৃষ্ঠায় ফিরে আসার পরে, আপনি getRedirectResult কল করে সাইন-ইন ফলাফল পেতে পারেন।

    WebWeb
    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    firebase.auth().signInWithRedirect(provider);

    সফলভাবে সম্পন্ন হলে, প্রদানকারীর সাথে যুক্ত OAuth আইডি টোকেন এবং অ্যাক্সেস টোকেন firebase.auth.UserCredential অবজেক্ট থেকে পুনরুদ্ধার করা যেতে পারে।

    OAuth অ্যাক্সেস টোকেন ব্যবহার করে, আপনি Yahoo API কল করতে পারেন।

    উদাহরণস্বরূপ, মৌলিক প্রোফাইল তথ্য পেতে, নিম্নলিখিত REST API কল করা যেতে পারে:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

    যেখানে YAHOO_USER_UID হল ইয়াহু ব্যবহারকারীর আইডি যা firebase.auth().currentUser.providerData[0].uid ক্ষেত্র বা result.additionalUserInfo.profile থেকে পুনরুদ্ধার করা যেতে পারে।

  5. যদিও উপরের উদাহরণগুলি সাইন-ইন প্রবাহের উপর ফোকাস করে, আপনার কাছে linkWithPopup / linkWithRedirect ব্যবহার করে বিদ্যমান ব্যবহারকারীর সাথে Yahoo প্রদানকারীকে লিঙ্ক করার ক্ষমতাও রয়েছে। উদাহরণস্বরূপ, আপনি একই ব্যবহারকারীর সাথে একাধিক প্রদানকারীকে লিঙ্ক করতে পারেন যাতে তাদের উভয়ের সাথে সাইন ইন করতে পারেন৷

    WebWeb
    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. একই প্যাটার্ন reauthenticateWithPopup / reauthenticateWithRedirect এর সাথে ব্যবহার করা যেতে পারে যা সাম্প্রতিক লগইন প্রয়োজন এমন সংবেদনশীল অপারেশনগুলির জন্য নতুন শংসাপত্র পুনরুদ্ধার করতে ব্যবহার করা যেতে পারে।

    WebWeb
    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

আপনি যদি Firebase কনসোলে প্রতি ইমেল ঠিকানা সেটিং-এ একটি অ্যাকাউন্ট সক্ষম করে থাকেন, যখন একজন ব্যবহারকারী একটি প্রদানকারীতে (যেমন Yahoo) একটি ইমেল দিয়ে সাইন ইন করার চেষ্টা করেন যা আগে থেকেই অন্য Firebase ব্যবহারকারীর প্রদানকারীর (যেমন Google) জন্য বিদ্যমান, ত্রুটি auth/account-exists-with-different-credential একটি AuthCredential অবজেক্ট (Yahoo শংসাপত্র) সহ নিক্ষেপ করা হয়। উদ্দেশ্যপ্রণোদিত প্রদানকারীতে সাইন ইন সম্পূর্ণ করার জন্য, ব্যবহারকারীকে প্রথমে বিদ্যমান প্রদানকারীর (গুগল) সাথে সাইন ইন করতে হবে এবং তারপরে প্রাক্তন AuthCredential (Yahoo শংসাপত্র) এর সাথে লিঙ্ক করতে হবে৷

আপনি যদি signInWithPopup ব্যবহার করেন, তাহলে আপনি নিম্নলিখিত উদাহরণের মতো কোড সহ auth/account-exists-with-different-credential ত্রুটিগুলি পরিচালনা করতে পারেন:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

রিডাইরেক্ট মোড

এই ত্রুটিটি পুনঃনির্দেশ মোডে একইভাবে পরিচালনা করা হয়, পৃষ্ঠা পুনঃনির্দেশের মধ্যে (উদাহরণস্বরূপ, সেশন স্টোরেজ ব্যবহার করে) মুলতুবি থাকা শংসাপত্রটি ক্যাশ করতে হয়।

Google, Facebook এবং Twitter এর মতো Firebase দ্বারা সমর্থিত অন্যান্য OAuth প্রদানকারীর বিপরীতে, যেখানে সরাসরি OAuth অ্যাক্সেস টোকেন ভিত্তিক শংসাপত্রের মাধ্যমে সাইন-ইন করা যেতে পারে, Firebase Auth এর অক্ষমতার কারণে Yahoo-এর মতো প্রদানকারীদের জন্য একই ক্ষমতা সমর্থন করে না। Yahoo OAuth অ্যাক্সেস টোকেনের দর্শকদের যাচাই করতে Firebase Auth সার্ভার। এটি একটি গুরুত্বপূর্ণ নিরাপত্তা প্রয়োজনীয়তা এবং আক্রমণগুলি পুনরায় চালানোর জন্য অ্যাপ্লিকেশন এবং ওয়েবসাইটগুলিকে প্রকাশ করতে পারে যেখানে একটি প্রকল্পের (আক্রমণকারী) জন্য প্রাপ্ত একটি Yahoo OAuth অ্যাক্সেস টোকেন অন্য প্রকল্পে (শিকার) সাইন ইন করতে ব্যবহার করা যেতে পারে। পরিবর্তে, Firebase Auth সম্পূর্ণ OAuth ফ্লো এবং অনুমোদন কোড এক্সচেঞ্জ পরিচালনা করার ক্ষমতা দেয় OAuth ক্লায়েন্ট আইডি এবং Firebase কনসোলে কনফিগার করা গোপন ব্যবহার করে। যেহেতু অনুমোদন কোড শুধুমাত্র একটি নির্দিষ্ট ক্লায়েন্ট আইডি/গোপনের সাথে ব্যবহার করা যেতে পারে, তাই একটি প্রকল্পের জন্য প্রাপ্ত একটি অনুমোদন কোড অন্যটির সাথে ব্যবহার করা যাবে না।

যদি এই সরবরাহকারীদের অসমর্থিত পরিবেশে ব্যবহার করার প্রয়োজন হয়, একটি তৃতীয় পক্ষের OAuth লাইব্রেরি এবং Firebase কাস্টম প্রমাণীকরণ ব্যবহার করা প্রয়োজন। পূর্বেরটি প্রদানকারীর সাথে প্রমাণীকরণের জন্য এবং পরবর্তীটিকে একটি কাস্টম টোকেনের জন্য প্রদানকারীর শংসাপত্র বিনিময় করার জন্য প্রয়োজন৷

একটি Chrome এক্সটেনশনে Firebase দিয়ে প্রমাণীকরণ করুন

আপনি যদি একটি Chrome এক্সটেনশন অ্যাপ তৈরি করেন, অফস্ক্রিন ডকুমেন্টস গাইড দেখুন।

প্রকল্প তৈরির সময়, Firebase আপনার প্রকল্পের জন্য একটি অনন্য সাবডোমেনের ব্যবস্থা করবে: https://my-app-12345.firebaseapp.com

এটি OAuth সাইন ইনের জন্য পুনঃনির্দেশ প্রক্রিয়া হিসাবেও ব্যবহার করা হবে৷ সমস্ত সমর্থিত OAuth প্রদানকারীদের জন্য সেই ডোমেনটিকে অনুমতি দেওয়া প্রয়োজন৷ যাইহোক, এর মানে হল যে ব্যবহারকারীরা সেই ডোমেনটি দেখতে পারে ইয়াহুতে সাইন ইন করার সময় অ্যাপ্লিকেশনটিতে পুনঃনির্দেশ করার আগে: এখানে চালিয়ে যান: https://my-app-12345.firebaseapp.com

আপনার সাবডোমেন প্রদর্শন এড়াতে, আপনি Firebase Hosting সাথে একটি কাস্টম ডোমেন সেট আপ করতে পারেন:

  1. Hosting জন্য আপনার ডোমেন সেট আপ করার জন্য ধাপ 1 থেকে 3 অনুসরণ করুন। আপনি যখন আপনার ডোমেনের মালিকানা যাচাই করেন, Hosting আপনার কাস্টম ডোমেনের জন্য একটি SSL শংসাপত্রের বিধান করে।
  2. Firebase কনসোলে অনুমোদিত ডোমেনের তালিকায় আপনার কাস্টম ডোমেন যোগ করুন: auth.custom.domain.com
  3. Yahoo বিকাশকারী কনসোল বা OAuth সেটআপ পৃষ্ঠায়, পুনঃনির্দেশিত পৃষ্ঠার URLটিকে সাদা তালিকাভুক্ত করুন, যা আপনার কাস্টম ডোমেনে অ্যাক্সেসযোগ্য হবে: https://auth.custom.domain.com/__/auth/handler
  4. আপনি যখন জাভাস্ক্রিপ্ট লাইব্রেরি আরম্ভ করেন, তখন authDomain ফিল্ডের সাথে আপনার কাস্টম ডোমেন নির্দিষ্ট করুন:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

পরবর্তী পদক্ষেপ

একজন ব্যবহারকারী প্রথমবার সাইন ইন করার পরে, একটি নতুন ব্যবহারকারীর অ্যাকাউন্ট তৈরি করা হয় এবং শংসাপত্রগুলির সাথে লিঙ্ক করা হয়—অর্থাৎ, ব্যবহারকারীর নাম এবং পাসওয়ার্ড, ফোন নম্বর, বা প্রমাণ প্রদানকারীর তথ্য — ব্যবহারকারী সাইন ইন করেছেন। এই নতুন অ্যাকাউন্টটি আপনার ফায়ারবেস প্রকল্পের অংশ হিসাবে সংরক্ষণ করা হয়েছে এবং ব্যবহারকারী কীভাবে সাইন ইন করুন না কেন, আপনার প্রকল্পের প্রতিটি অ্যাপ জুড়ে একজন ব্যবহারকারীকে শনাক্ত করতে ব্যবহার করা যেতে পারে।

  • আপনার অ্যাপে, আপনার ব্যবহারকারীর প্রমাণীকরণের স্থিতি জানার প্রস্তাবিত উপায় হল Auth অবজেক্টে একজন পর্যবেক্ষক সেট করা। তারপর আপনি User অবজেক্ট থেকে ব্যবহারকারীর মৌলিক প্রোফাইল তথ্য পেতে পারেন। ব্যবহারকারীদের পরিচালনা দেখুন।

  • আপনার Firebase Realtime Database এবং Cloud Storage সুরক্ষা নিয়মে , আপনি auth ভেরিয়েবল থেকে সাইন-ইন করা ব্যবহারকারীর অনন্য ব্যবহারকারী আইডি পেতে পারেন এবং ব্যবহারকারী কোন ডেটা অ্যাক্সেস করতে পারে তা নিয়ন্ত্রণ করতে এটি ব্যবহার করতে পারেন।

আপনি একটি বিদ্যমান ব্যবহারকারীর অ্যাকাউন্টে প্রমাণীকরণ প্রদানকারীর শংসাপত্র লিঙ্ক করে একাধিক প্রমাণীকরণ প্রদানকারী ব্যবহার করে ব্যবহারকারীদের আপনার অ্যাপে সাইন ইন করার অনুমতি দিতে পারেন।

একজন ব্যবহারকারীকে সাইন আউট করতে, signOut কল করুন:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});