المصادقة باستخدام Google Sign-In with JavaScript

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

قبل ان تبدأ

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

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

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

للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK ، اتبع الخطوات التالية:

  1. إنشاء مثيل لكائن موفر Google:

    الويب v8

    var provider = new firebase.auth.GoogleAuthProvider();

    الويب الإصدار 9

    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();
  2. اختياري: حدد أوث إضافي 2.0 نطاقات الذي تريد طلب من مزود المصادقة. لإضافة نطاق، اتصل addScope . على سبيل المثال:

    الويب v8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    الويب الإصدار 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    اطلع على وثائق موفر المصادقة .
  3. اختياري: لتوطين تدفق أوث مقدم على اللغة المفضلة للمستخدم دون المرور صراحة المعلمات أوث مخصصة ذات الصلة، وتحديث رمز اللغة على سبيل المثال مصادقة قبل بدء تدفق أوث. على سبيل المثال:

    الويب v8

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

    الويب الإصدار 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. اختياري: حدد معلمات إضافية مزود أوث المخصصة التي تريد إرسالها مع طلب أوث. لإضافة معلمة مخصصة، والدعوة setCustomParameters على مزود تهيئة مع كائن تحتوي على المفتاح كما هو محدد من قبل وثائق مزود أوث والقيمة المقابلة. على سبيل المثال:

    الويب v8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    الويب الإصدار 9

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    معلمات OAuth المطلوبة المحجوزة غير مسموح بها وسيتم تجاهلها. انظر المرجع موفر المصادقة لمزيد من التفاصيل.
  5. قم بالمصادقة باستخدام Firebase باستخدام كائن موفر Google. يمكنك مطالبة المستخدمين بتسجيل الدخول بحساباتهم في Google إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
    • تسجيل الدخول باستخدام نافذة منبثقة، والدعوة signInWithPopup :

      الويب v8

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

      الويب الإصدار 9

      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;
          // ...
        }).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 = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      لاحظ أيضًا أنه يمكنك استرداد رمز OAuth المميز لموفر Google والذي يمكن استخدامه لجلب بيانات إضافية باستخدام Google APIs.

      هذا هو المكان الذي يمكنك من خلاله اكتشاف الأخطاء ومعالجتها. للحصول على قائمة من رموز الخطأ إلقاء نظرة على مستندات المرجعي أصيل .

    • لتسجيل الدخول عن طريق إعادة توجيه إلى صفحة تسجيل الدخول، والدعوة signInWithRedirect :

      الويب v8

      firebase.auth().signInWithRedirect(provider);

      الويب الإصدار 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      بعد ذلك، يمكنك أيضا استرداد رمز أوث مقدم جوجل عن طريق استدعاء getRedirectResult عند تحميل الصفحة الخاصة بك:

      الويب v8

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

      الويب الإصدار 9

      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;
        }).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 = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      هذا هو المكان الذي يمكنك من خلاله اكتشاف الأخطاء ومعالجتها. للحصول على قائمة من رموز الخطأ إلقاء نظرة على مستندات المرجعي أصيل .

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

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

  1. فتح مشروعك في وحدة التحكم Firebase .
  2. في قسم مصادقة، افتح صفحة تسجيل الدخول الأسلوب.
  3. إضافة URI كما يلي إلى قائمة المصرح مجالات:
    chrome-extension://CHROME_EXTENSION_ID

عمليات المنبثقة فقط ( signInWithPopup و linkWithPopup هي) المتاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الأساليب من برنامج نصي في الخلفية بدلاً من نافذة منبثقة لإجراء المتصفح ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة.

في الظاهر جعل ملف تمديد كروم الخاص بك من أن قمت بإضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

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

  • في التطبيقات الخاصة بك، والطريقة الموصى بها لمعرفة حالة المصادقة المستخدم الخاص بك هو وضع مراقب على Auth الكائن. يمكنك بعد ذلك الحصول على المعلومات الشخصية الأساسية للمستخدم من User الكائن. انظر إدارة المستخدمين .

  • في قاعدة البيانات الخاصة بك Firebase الحقيقي وسحابة التخزين قواعد الأمن ، يمكنك الحصول على قعت في هوية المستخدم الفريد المستخدم من auth متغير، واستخدامها للسيطرة على ما هي البيانات على وصول ويمكن للمستخدم.

يمكنك السماح للمستخدمين تسجيل الدخول إلى التطبيق الخاص بك باستخدام موفري المصادقة متعددة عن طريق ربط المصادقة أوراق اعتماد مقدم إلى حساب مستخدم موجود.

تسجيل الخروج مستخدم، استدعاء signOut :

الويب v8

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

الويب الإصدار 9

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

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