المصادقة باستخدام Google باستخدام JavaScript

يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حساباتهم على Google. يمكنك استخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لتنفيذ عملية تسجيل الدخول إلى حساب Google. تسجيل الدخول يدويًا باستخدام مكتبة "تسجيل الدخول باستخدام حساب Google" تمرير الرمز المميّز للمعرّف الناتج إلى Firebase.

قبل البدء

  1. أضِف Firebase إلى مشروع JavaScript.
  2. تفعيل Google كطريقة تسجيل دخول في وحدة تحكُّم Firebase:
    1. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
    2. في علامة التبويب طريقة تسجيل الدخول، فعِّل طريقة تسجيل الدخول باستخدام Google. وانقر على حفظ.

معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

أسهل طريقة لمصادقة المستخدمين في حال إنشاء تطبيق ويب من خلال Firebase باستخدام حساباتهم على Google هي التعامل مع تدفق تسجيل الدخول حزمة SDK لـ Firebase JavaScript. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى لا تستند إلى المتصفح، فيجب معالجة تدفق تسجيل الدخول يدويًا).

لمعالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لJavaScript لمنصّة Firebase، اتّبِع الخطوات التالية: الخطوات:

  1. إنشاء مثيل لعنصر موفّر الخدمة من Google:
    WebWeb
    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();
    var provider = new firebase.auth.GoogleAuthProvider();
  2. اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريدها. ترغب في طلبها من مُقدِّم خدمة المصادقة. لإضافة نطاق، اطلب addScope على سبيل المثال:
    WebWeb
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    راجع مقدم خدمة المصادقة ذات الصلة.
  3. اختياري: لترجمة مسار OAuth لدى الموفّر إلى الإعدادات المفضّلة للمستخدم بدون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، يمكنك تحديث اللغة الرمز في مثيل Auth قبل بدء مسار OAuth. على سبيل المثال:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. اختياري: تحديد معلَمات إضافية لموفِّر OAuth الذي تريد إرساله مع طلب OAuth. لإضافة معلمة مخصصة، طلب setCustomParameters على مقدِّم الخدمة الذي تم إعداده باستخدام عنصر يحتوي على المفتاح كما هو موضح في مستندات موفّر OAuth والقيمة المقابلة. على سبيل المثال:
    WebWeb
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    غير مسموح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. يمكنك الاطّلاع على مرجع موفِّر المصادقة لمزيد من التفاصيل.
  5. يمكنك المصادقة مع Firebase باستخدام عنصر موفّر Google. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حساباتهم على Google إما من خلال فتح أو عبر إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه هي ويفضلها على الأجهزة المحمولة.
    • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:
      WebWeb
      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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;
          // ...
        });
      تجدر الإشارة أيضًا إلى أنّه يمكنك استرداد رمز OAuth المميز لموفِّر Google، والذي يمكن استخدامه لجلب بيانات إضافية باستخدام Google APIs.

      ويمكنك هنا أيضًا رصد الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على المستندات المرجعية للمصادقة.

    • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بالرقم signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام "signInWithRedirect".
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضًا استرداد رمز OAuth المميز لموفِّر Google من خلال طلب getRedirectResult عند تحميل صفحتك:
      WebWeb
      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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;
          // ...
        });
      ويمكنك هنا أيضًا رصد الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على المستندات المرجعية للمصادقة.

في حال تفعيل الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم Firebase، عندما يحاول المستخدم تسجيل الدخول إلى مقدّم خدمة (مثل Google) باستخدام عنوان بريد إلكتروني سبق أن تمت لمقدم خدمة مستخدم Firebase آخر (مثل Facebook)، فإن الخطأ تم رمي auth/account-exists-with-different-credential إلى جانب عنصر AuthCredential (الرمز المميز لرقم تعريف Google). لإكمال عملية تسجيل الدخول إلى مقدم الخدمة المقصود، يتعين على المستخدم تسجيل الدخول أولاً إلى المزود الحالي (Facebook)، ثم الربط AuthCredential السابق (الرمز المميّز لمعرّف Google).

في حال استخدام signInWithPopup، يمكنك التعامل مع auth/account-exists-with-different-credential خطأ مع رمز مثل ما يلي مثال:

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

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google 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 Google 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) {
  // ...
}

وضع إعادة التوجيه

تتم معالجة هذا الخطأ بطريقة مماثلة في وضع إعادة التوجيه، مع وجود فرق بين أن يتم تخزين بيانات الاعتماد مؤقتًا بين عمليات إعادة توجيه الصفحات (على سبيل المثال، استخدام تخزين الجلسة).

يمكنك أيضًا المصادقة مع Firebase باستخدام حساب Google عن طريق معالجة خطوات تسجيل الدخول من خلال مكتبة "تسجيل الدخول باستخدام حساب Google":

  1. ادمج ميزة "تسجيل الدخول باستخدام حساب Google" في تطبيقك من خلال اتّباع دليل عمليات الدمج. احرص على ضبط ميزة "تسجيل الدخول بحساب Google" باستخدام معرِّف عميل Google الذي تم إنشاؤه لمشروعك على Firebase. يمكنك العثور على معرِّف عميل Google لمشروعك في صفحة بيانات الاعتماد الخاصة بمشروعك على Developers Console.
  2. في معاودة الاتصال بنتيجة تسجيل الدخول، يمكنك استبدال الرمز المميز للمعرّف من استجابة مصادقة Google ببيانات اعتماد Firebase واستخدامه للمصادقة مع Firebase:
    function handleCredentialResponse(response) {
      // Build Firebase credential with the Google ID token.
      const idToken = response.credential;
      const credential = GoogleAuthProvider.credential(idToken);
    
      // Sign in with credential from the Google user.
      signInWithCredential(auth, credential).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 credential that was used.
        const credential = GoogleAuthProvider.credentialFromError(error);
        // ...
      });
    }

للمصادقة باستخدام Firebase في تطبيق Node.js:

  1. سجِّل دخول المستخدم باستخدام حسابه على Google واحصل على رقم تعريف Google للمستخدم. الرمز المميز. يمكنك تحقيق ذلك بعدة طرق. على سبيل المثال:
    • إذا كان تطبيقك يحتوي على واجهة أمامية للمتصفّح، استخدِم ميزة "تسجيل الدخول بحساب Google" على النحو الموضّح. في التعامل مع تسجيل الدخول يدويًا الحصول على الرمز المميّز لمعرّف Google من صفحة المصادقة الرد:
      var id_token = googleUser.getAuthResponse().id_token
      بعد ذلك، أرسِل هذا الرمز المميّز إلى تطبيق Node.js.
    • إذا كان تطبيقك يعمل على جهاز ذي إمكانات إدخال محدودة، مثل للتلفزيون، فيمكنك استخدام تقويم تسجيل الدخول إلى أجهزة التلفزيون والأجهزة
  2. بعد الحصول على الرمز المميّز لمعرّف Google للمستخدم، يمكنك استخدامه لإنشاء "بيانات اعتماد" ثم سجّل دخول المستخدم باستخدام بيانات الاعتماد:
    WebWeb
    import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";
    
    // Build Firebase credential with the Google ID token.
    const credential = GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    const auth = getAuth();
    signInWithCredential(auth, credential).catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      // The email of the user's account used.
      const email = error.customData.email;
      // The AuthCredential type that was used.
      const credential = GoogleAuthProvider.credentialFromError(error);
      // ...
    });
    // Build Firebase credential with the Google ID token.
    var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    firebase.auth().signInWithCredential(credential).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;
      // ...
    });

المصادقة باستخدام Firebase في إحدى إضافات Chrome

إذا كنت تنشئ تطبيق إضافة Chrome، يمكنك الاطلاع على دليل المستندات خارج الشاشة

عند إنشاء المشروع، سيوفر Firebase نطاقًا فرعيًا فريدًا لمشروعك: https://my-app-12345.firebaseapp.com

سيتم استخدام هذه الطريقة أيضًا كآلية إعادة توجيه لتسجيل الدخول عبر بروتوكول OAuth. سيحتاج هذا النطاق إلى متاح لجميع موفّري OAuth المتوافقين. ومع ذلك، هذا يعني أن المستخدمين قد يرون أن نطاق أثناء تسجيل الدخول إلى Google قبل إعادة التوجيه إلى التطبيق: المتابعة إلى: https://my-app-12345.firebaseapp.com

لتجنّب عرض نطاقك الفرعي، يمكنك إعداد نطاق خاص باستخدام Firebase Hosting:

  1. اتبع الخطوات من 1 إلى 3 في إعداد نطاقك لـ "Hosting" عند إثبات الملكية ملكية نطاقك، يوفّر Hosting شهادة طبقة المقابس الآمنة لنطاقك الخاص.
  2. أضف نطاقك الخاص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
  3. في وحدة تحكم مطوري برامج Google أو صفحة إعداد OAuth، ضع عنوان URL لصفحة إعادة التوجيه في القائمة البيضاء، والتي يمكن الوصول إليها على نطاقك الخاص: https://auth.custom.domain.com/__/auth/handler
  4. عند تهيئة مكتبة JavaScript، حدد نطاقك الخاص باستخدام الحقل "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);

الخطوات التالية

بعد تسجيل المستخدم الدخول لأول مرة، يتم إنشاء حساب مستخدم جديد المرتبطة ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور، أو الرقم أو معلومات مقدم المصادقة - المستخدم الذي سجّل الدخول باستخدامه. هذا الجديد كجزء من مشروع Firebase، ويمكن استخدامه لتحديد مستخدم في كل تطبيق في مشروعك، بغض النظر عن كيفية تسجيل دخوله.

  • الطريقة الموصى بها في تطبيقاتك لمعرفة حالة المصادقة للمستخدم هي ضبط مراقب على كائن 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.
});