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

আপনি আপনার অ্যাপে GitHub প্রমাণীকরণ সংহত করে আপনার ব্যবহারকারীদের তাদের GitHub অ্যাকাউন্ট ব্যবহার করে Firebase- এর মাধ্যমে প্রমাণীকরণ করতে পারেন। আপনি সাইন-ইন প্রবাহ চালানোর জন্য ফায়ারবেস এসডিকে ব্যবহার করে, অথবা গিটহাব OAuth 2.0 প্রবাহ ম্যানুয়ালি বহন করে এবং ফায়ারবেসে ফলস্বরূপ অ্যাক্সেস টোকেন দিয়ে গিটহাব প্রমাণীকরণকে সংহত করতে পারেন।

তুমি শুরু করার আগে

  1. আপনার জাভাস্ক্রিপ্ট প্রকল্প Firebase যোগ করুন
  2. ইন Firebase কনসোল , প্রমাণীকরণ অধ্যায় খুলুন।
  3. পদ্ধতি ট্যাবে সাইন অন, GitHub প্রদানকারী সক্রিয় করুন।
  4. ক্লায়েন্ট আইডি এবং যে প্রদানকারীর ডেভেলপার প্রদানকারী কনফিগারেশন কনসোল থেকে ক্লায়েন্ট সিক্রেট যোগ করুন
    1. আপনার অ্যাপ নিবন্ধন GitHub থেকে একটি ডেভেলপার অ্যাপ্লিকেশন হিসেবে এবং আপনার অ্যাপ্লিকেশনের OAuth এর 2.0 ক্লায়েন্ট আইডি এবং ক্লায়েন্ট সিক্রেট পেতে।
    2. নিশ্চিত করুন যে আপনার Firebase OAuth এর পুনর্নির্দেশ কোনো URI (যেমন my-app-12345.firebaseapp.com/__/auth/handler ) আপনার উপর আপনার অ্যাপ্লিকেশনের সেটিংস পৃষ্ঠায় আপনার অনুমোদন কলব্যাক URL হিসেবে সেট করা হয় GitHub অ্যাপ্লিকেশনের কনফিগ
  5. সংরক্ষণ ক্লিক করুন।

ফায়ারবেস এসডিকে দিয়ে সাইন-ইন প্রবাহ পরিচালনা করুন

আপনি যদি একটি ওয়েব অ্যাপ তৈরি করে থাকেন, তাহলে আপনার ব্যবহারকারীদের তাদের GitHub অ্যাকাউন্ট ব্যবহার করে Firebase দিয়ে প্রমাণীকরণের সবচেয়ে সহজ উপায় হল Firebase JavaScript SDK- এর মাধ্যমে সাইন-ইন প্রবাহ পরিচালনা করা। (যদি আপনি Node.js বা অন্য নন-ব্রাউজার পরিবেশে একজন ব্যবহারকারীকে প্রমাণীকরণ করতে চান, তাহলে আপনাকে অবশ্যই সাইন-ইন প্রবাহ ম্যানুয়ালি পরিচালনা করতে হবে।)

ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে দিয়ে সাইন-ইন প্রবাহ পরিচালনা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. GitHub প্রদানকারী বস্তুর একটি উদাহরণ তৈরি করুন:

    ওয়েব সংস্করণ 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    ওয়েব সংস্করণ 8

    var provider = new firebase.auth.GithubAuthProvider();
  2. ঐচ্ছিক: 2.0 সুযোগ উল্লেখ অতিরিক্ত OAuth এর যে আপনার প্রমাণীকরণ প্রদানকারীর থেকে অনুরোধ করতে চাই। একটি সুযোগ যোগ করার জন্য, কল addScope । উদাহরণ স্বরূপ:

    ওয়েব সংস্করণ 9

    provider.addScope('repo');

    ওয়েব সংস্করণ 8

    provider.addScope('repo');
    দেখুন প্রমাণীকরণ প্রদানকারী ডকুমেন্টেশন
  3. ঐচ্ছিক: অতিরিক্ত কাস্টম OAuth এর প্রদানকারী পরামিতি উল্লেখ করুন যে আপনি যদি OAuth অনুরোধ পাঠাতে চাই। একটি কাস্টম প্যারামিটার যোগ করতে, কল setCustomParameters একটি অবজেক্ট হিসেবে OAuth এর প্রদানকারী ডকুমেন্টেশন এবং সংশ্লিষ্ট মান দ্বারা নির্দিষ্ট কী সম্বলিত সঙ্গে সক্রিয়া প্রদানকারী করেন। উদাহরণ স্বরূপ:

    ওয়েব সংস্করণ 9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });

    ওয়েব সংস্করণ 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    সংরক্ষিত প্রয়োজনীয় OAuth পরামিতি অনুমোদিত নয় এবং উপেক্ষা করা হবে। দেখুন প্রমাণীকরণ প্রদানকারী রেফারেন্স আরো বিস্তারিত জানার জন্য।
  4. GitHub প্রদানকারী বস্তু ব্যবহার করে Firebase দিয়ে প্রমাণীকরণ করুন। আপনি আপনার ব্যবহারকারীদের তাদের GitHub অ্যাকাউন্টে সাইন ইন করার জন্য একটি পপ-আপ উইন্ডো খোলার মাধ্যমে অথবা সাইন-ইন পৃষ্ঠায় পুনirectনির্দেশিত করার জন্য অনুরোধ করতে পারেন। পুনirectনির্দেশ পদ্ধতি মোবাইল ডিভাইসে পছন্দ করা হয়।
    • একটি পপ-আপ উইন্ডো মাধ্যমে সাইন ইন করুন, কল signInWithPopup :

      ওয়েব সংস্করণ 9

      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          const credential = GithubAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      ওয়েব সংস্করণ 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          var token = credential.accessToken;
      
          // The signed-in user info.
          var user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      এছাড়াও লক্ষ্য করুন যে আপনি GitHub প্রদানকারীর OAuth টোকেন পুনরুদ্ধার করতে পারেন যা GitHub API গুলি ব্যবহার করে অতিরিক্ত ডেটা আনতে ব্যবহার করা যেতে পারে।

      এখানেও আপনি ত্রুটিগুলি ধরতে এবং পরিচালনা করতে পারেন। ত্রুটি কোড একটি তালিকা দেখার জন্য কটাক্ষপাত আছে প্রমাণীকরণ রেফারেন্স ডক্স

    • সাইন-ইন পৃষ্ঠা, কল পুনঃনির্দেশিত দ্বারা সাইন ইন করার জন্য signInWithRedirect :

      ওয়েব সংস্করণ 9

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

      ওয়েব সংস্করণ 8

      firebase.auth().signInWithRedirect(provider);
      তারপর, আপনি এছাড়াও GitHub প্রদানকারীর OAuth টোকেন কল করে উদ্ধার করতে পারেন getRedirectResult যখন আপনার পৃষ্ঠা লোড:

      ওয়েব সংস্করণ 9

      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = GithubAuthProvider.credentialFromResult(result);
          if (credential) {
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            const token = credential.accessToken;
            // ...
          }
      
          // The signed-in user info.
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      ওয়েব সংস্করণ 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            var token = credential.accessToken;
            // ...
          }
      
          // The signed-in user info.
          var user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      এখানেও আপনি ত্রুটিগুলি ধরতে এবং পরিচালনা করতে পারেন। ত্রুটি কোড একটি তালিকা দেখার জন্য কটাক্ষপাত আছে প্রমাণীকরণ রেফারেন্স ডক্স

সাইন-ইন প্রবাহ ম্যানুয়ালি পরিচালনা করুন

আপনি GitHub OAuth 2.0 এন্ডপয়েন্টগুলিতে কল করে সাইন-ইন প্রবাহ পরিচালনা করে GitHub অ্যাকাউন্ট ব্যবহার করে Firebase- এর মাধ্যমে প্রমাণীকরণ করতে পারেন:

  1. আপনার অ্যাপ্লিকেশন মধ্যে অনুসরণ করে GitHub প্রমাণীকরণ সংহত বিকাশকারীর ডকুমেন্টেশন । গিটহাব সাইন-ইন প্রবাহের শেষে, আপনি একটি OAuth 2.0 অ্যাক্সেস টোকেন পাবেন।
  2. আপনার যদি Node.js অ্যাপ্লিকেশনে সাইন ইন করার প্রয়োজন হয়, তাহলে Node.js অ্যাপ্লিকেশনে OAuth অ্যাক্সেস টোকেন পাঠান।
  3. একজন ব্যবহারকারী গিটহাবের সাথে সফলভাবে সাইন ইন করার পরে, একটি Firebase শংসাপত্রের জন্য OAuth 2.0 অ্যাক্সেস টোকেন বিনিময় করুন:

    ওয়েব সংস্করণ 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    ওয়েব সংস্করণ 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Firebase শংসাপত্র ব্যবহার করে Firebase এর সাথে প্রমাণীকরণ করুন:

    ওয়েব সংস্করণ 9

    import { getAuth, signInWithCredential } from "firebase/auth";
    
    // Sign in with the credential from the user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

    ওয়েব সংস্করণ 8

    // Sign in with the credential from the user.
    firebase.auth()
      .signInWithCredential(credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

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

আপনি যদি একটি ক্রোম এক্সটেনশন অ্যাপ তৈরি করেন, তাহলে আপনাকে অবশ্যই আপনার ক্রোম এক্সটেনশন আইডি যোগ করতে হবে:

  1. আপনার প্রকল্প খুলুন Firebase কনসোল
  2. প্রমাণীকরণ বিভাগে, সাইন-ইন পদ্ধতি পৃষ্ঠা খুলুন।
  3. : একটি কোনো URI অনুমোদিত ডোমেন তালিকায় নিচের মত যোগ
    chrome-extension://CHROME_EXTENSION_ID

শুধু পপআপ কার্যকলাপ ( signInWithPopup , linkWithPopup এবং reauthenticateWithPopup হিসাবে Chrome এক্সটেনশানগুলি HTTP- র পুনঃনির্দেশ ব্যবহার করতে পারবেন না), ক্রোম এক্সটেনশন পাওয়া যায়। ব্রাউজার অ্যাকশন পপআপের পরিবর্তে আপনার এই পদ্ধতিগুলিকে ব্যাকগ্রাউন্ড পৃষ্ঠা স্ক্রিপ্ট থেকে কল করা উচিত, কারণ প্রমাণীকরণ পপআপ ব্রাউজার অ্যাকশন পপআপ বাতিল করবে। পপআপ পদ্ধতি শুধুমাত্র ব্যবহার এক্সটেনশন ব্যবহার করা যেতে পারে ম্যানিফেস্ট থেকে V2 । নতুন ম্যানিফেস্ট V3 কেবল পরিষেবা শ্রমিকদের ফর্ম, যা সব সময়ে পপআপ অপারেশন সঞ্চালন করা সম্ভব নয় মধ্যে পটভূমি চিত্রনাট্যের পারেন।

আপনার Chrome এক্সটেনশন ম্যানিফেস্টে ফাইল বানান আপনি যোগ নিশ্চিত করুন যে https://apis.google.com করতে URL content_security_policy allowlist।

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

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

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

  • আপনার Firebase রিয়েলটাইম ডাটাবেস এবং ক্লাউড স্টোরেজ সিকিউরিটি রুলস , আপনি পেতে পারেন সাইন ইন থেকে ব্যবহারকারী এর অনন্য ব্যবহারকারী আইডি auth পরিবর্তনশীল, এবং এটি ব্যবহার কোন ডেটা একটি ব্যবহারকারী অ্যাক্সেস করতে পারবেন নিয়ন্ত্রন করতে পারেন।

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

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

ওয়েব সংস্করণ 9

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

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

ওয়েব সংস্করণ 8

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