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

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

قبل البدء

أضِف Firebase إلى مشروع JavaScript.
فعِّل Google كطريقة لتسجيل الدخول في وحدة تحكّم Firebase:
1. في Firebase وحدة التحكّم، افتح قسم المصادقة.
2. في علامة التبويب طريقة تسجيل الدخول، فعِّل طريقة تسجيل الدخول Google وانقر على حفظ.
ملاحظة: إذا كنت تفضّل استخدام Firebase CLI، نفِّذ الأمر firebase init auth لإعداد موفّري المصادقة، ثم نفِّذ الأمر firebase deploy --only auth لنشر التغييرات في مشروعك.

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

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

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

أنشئ مثيلاً لكائن موفّر Google:

Web

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Web

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

اختياري: حدِّد نطاقات إضافية لبروتوكول OAuth 2.0 تريد طلبها من موفّر المصادقة. لإضافة نطاق، استخدِم الدالة addScope. على سبيل المثال:
Web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
راجِع مستندات موفّر المصادقة.

اختياري: لتحديد لغة عملية OAuth الخاصة بموفّر الخدمة لتتطابق مع اللغة المفضّلة لدى المستخدم بدون تمرير مَعلمات OAuth المخصّصة ذات الصلة بشكل صريح، عدِّل رمز اللغة في مثيل Auth قبل بدء عملية OAuth. على سبيل المثال:

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

اختياري: حدِّد مَعلمات إضافية مخصّصة لمزوّد خدمة OAuth تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، استدعِ الدالة setCustomParameters على مقدّم الخدمة الذي تمّت تهيئته باستخدام عنصر يحتوي على المفتاح كما هو محدّد في مستندات مقدّم خدمة OAuth والقيمة المقابلة. على سبيل المثال:
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
لا يُسمح باستخدام مَعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. راجِع مرجع موفّر المصادقة لمعرفة المزيد من التفاصيل.

يمكنك المصادقة باستخدام Firebase من خلال عنصر مقدّم خدمة Google. يمكنك أن تطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Google إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. يُفضّل استخدام طريقة إعادة التوجيه على الأجهزة الجوّالة.

لتسجيل الدخول باستخدام نافذة منبثقة، اتّصِل بالرقم signInWithPopup:

Web

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);
    // ...
  });auth_google_signin_popup.js

Web

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;
    // ...
  });google-signin.js

يُرجى أيضًا ملاحظة أنّه يمكنك استرداد رمز OAuth المميز لمزوّد خدمة Google الذي يمكن استخدامه لجلب بيانات إضافية باستخدام Google APIs.

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

لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، استدعِ الدالة signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام الدالة `signInWithRedirect`.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web

firebase.auth().signInWithRedirect(provider);index.js

بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بمقدّم خدمة Google من خلال استدعاء getRedirectResult عند تحميل صفحتك:

Web

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);
    // ...
  });auth_google_signin_redirect_result.js

Web

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;
    // ...
  });google-signin.js

التعامل مع أخطاء account-exists-with-different-credential

تعمل Google كموفِّر هوية للبريد الإلكتروني ووسائل التواصل الاجتماعي. تكون موفّرات الهوية المستندة إلى البريد الإلكتروني مرجعًا موثوقًا لجميع عناوين البريد الإلكتروني المرتبطة بنطاق البريد الإلكتروني المستضاف، بينما تؤكّد موفّرات الهوية المستندة إلى وسائل التواصل الاجتماعي هويات البريد الإلكتروني استنادًا إلى تأكيد لمرة واحدة على عنوان البريد الإلكتروني. لن يؤدي تسجيل دخول المستخدم باستخدام Google إلى حدوث هذا الخطأ مطلقًا عندما يكون حسابه مستضافًا على Google، حتى إذا اشترك في حسابه باستخدام كلمة مرور أو موفّر هوية تابع لجهة خارجية.

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم 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":

يمكنك دمج ميزة "تسجيل الدخول باستخدام حساب Google" في تطبيقك باتّباع دليل الدمج. احرص على إعداد ميزة "تسجيل الدخول باستخدام حساب Google" باستخدام معرِّف عميل Google الذي تم إنشاؤه لمشروع Firebase. يمكنك العثور على معرّف عميل Google الخاص بمشروعك في صفحة بيانات الاعتماد في Developers Console الخاصة بمشروعك.

في معاودة الاتصال بنتيجة تسجيل الدخول، استبدِل رمز التعريف من استجابة مصادقة 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

للمصادقة باستخدام Firebase في تطبيق Node.js، اتّبِع الخطوات التالية:

سجِّل دخول المستخدم باستخدام حسابه على Google واحصل على الرمز المميّز لمعرّف Google الخاص بالمستخدم. يمكنك تحقيق ذلك بعدة طرق. على سبيل المثال:
- إذا كان تطبيقك يتضمّن واجهة أمامية للمتصفّح، استخدِم ميزة "تسجيل الدخول باستخدام حساب Google" كما هو موضّح في قسم التعامل مع عملية تسجيل الدخول يدويًا. احصل على رمز التعريف المميز من Google من ردّ المصادقة:
```
var id_token = googleUser.getAuthResponse().id_token
```
  بعد ذلك، أرسِل هذا الرمز المميّز إلى تطبيق Node.js.
- إذا كان تطبيقك يعمل على جهاز ذي إمكانات إدخال محدودة، مثل جهاز تلفزيون، يمكنك استخدام مسار تسجيل الدخول إلى Google على أجهزة التلفزيون والأجهزة.

بعد الحصول على رمز تعريف Google للمستخدم، استخدِمه لإنشاء عنصر Credential، ثم سجِّل دخول المستخدم باستخدام بيانات الاعتماد:

Web

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);
  // ...
});auth_google_build_signin.js

Web

// 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;
  // ...
});google-signin.js

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

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

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

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

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

اتّبِع الخطوات من 1 إلى 3 في مقالة إعداد نطاقك لاستخدام Hosting. عند إثبات ملكية نطاقك، توفّر Hosting شهادة SSL لنطاقك المخصّص.
أضِف نطاقك المخصّص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
في "وحدة تحكّم مطوّري Google" أو صفحة إعداد OAuth، أضِف عنوان URL الخاص بصفحة إعادة التوجيه إلى القائمة البيضاء، والذي يمكن الوصول إليه على نطاقك المخصّص: https://auth.custom.domain.com/__/auth/handler.

عند إعداد مكتبة 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:

Web

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

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

Web

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

المصادقة باستخدام Google باستخدام JavaScript تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.