يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام موفري OAuth مثل Yahoo من خلال دمج تسجيل دخول OAuth العام في تطبيقك باستخدام Firebase SDK لتنفيذ تدفق تسجيل الدخول من البداية إلى النهاية.
قبل ان تبدأ
لتسجيل دخول المستخدمين باستخدام حسابات Yahoo ، يجب أولاً تمكين Yahoo كموفر تسجيل دخول لمشروع Firebase الخاص بك:
- أضف Firebase إلى مشروع JavaScript الخاص بك .
- في وحدة تحكم Firebase ، افتح قسم المصادقة .
- في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر Yahoo .
- أضف معرّف العميل وسر العميل من وحدة تحكم مطوِّر الموفر إلى تهيئة الموفر:
لتسجيل عميل Yahoo OAuth ، اتبع وثائق مطور Yahoo عند تسجيل تطبيق ويب مع Yahoo .
تأكد من تحديد أذنين OpenID Connect API:
profile
email
.- عند تسجيل التطبيقات مع هؤلاء الموفرين ، تأكد من تسجيل نطاق
*.firebaseapp.com
لمشروعك باعتباره مجال إعادة التوجيه لتطبيقك.
- انقر فوق حفظ .
تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK
إذا كنت تقوم بإنشاء تطبيق ويب ، فإن أسهل طريقة لمصادقة المستخدمين باستخدام Firebase باستخدام حسابات Yahoo الخاصة بهم هي التعامل مع تدفق تسجيل الدخول بالكامل باستخدام Firebase JavaScript SDK.
للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK ، اتبع الخطوات التالية:
أنشئ مثيلاً لـ OAuthProvider باستخدام معرف الموفر yahoo.com .
Web version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web version 8
var provider = new firebase.auth.OAuthProvider('yahoo.com');
اختياري : حدد معلمات OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth.
Web version 9
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web version 8
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
للحصول على المعلمات التي يدعمها Yahoo ، راجع وثائق Yahoo OAuth . لاحظ أنه لا يمكنك تمرير معلمات Firebase المطلوبة باستخدام
setCustomParameters()
. هذه المعلمات هي client_id و redirect_uri و response_type و range و state .اختياري : حدد نطاقات OAuth 2.0 إضافية بخلاف
profile
email
الذي تريد طلبه من موفر المصادقة. إذا كان تطبيقك يتطلب الوصول إلى بيانات المستخدم الخاصة من Yahoo APIs ، فستحتاج إلى طلب أذونات لـ Yahoo APIs ضمن أذونات API في وحدة تحكم مطوري Yahoo. يجب أن تكون نطاقات OAuth المطلوبة مطابقة تامة للنطاقات المكونة مسبقًا في أذونات واجهة برمجة التطبيقات للتطبيق. على سبيل المثال ، إذا طُلب الوصول للقراءة / الكتابة إلى جهات اتصال المستخدم وتم تكوينه مسبقًا في أذونات واجهة برمجة التطبيقات للتطبيق ،sdct-w
بدلاً من نطاق OAuth للقراءة فقطsdct-r
. وإلا ، فسيفشل التدفق وسيظهر خطأ للمستخدم النهائي.Web version 9
// 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');
Web version 8
// 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 .
مصادقة مع Firebase باستخدام كائن موفر OAuth. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حسابات Yahoo الخاصة بهم إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
لتسجيل الدخول من خلال نافذة منبثقة ، اتصل
signInWithPopup
:Web version 9
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. });
Web version 8
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
.Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
عند الإكمال بنجاح ، يمكن استرداد رمز معرف OAuth المميز ورمز الوصول المرتبط بالموفر من
firebase.auth.UserCredential
للكائن المرتجع.باستخدام رمز الوصول OAuth المميز ، يمكنك استدعاء Yahoo API .
على سبيل المثال ، للحصول على معلومات الملف الشخصي الأساسية ، يمكن استدعاء واجهة برمجة تطبيقات REST التالية:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
حيث
YAHOO_USER_UID
هو معرف مستخدم Yahoo الذي يمكن استرجاعه منfirebase.auth().currentUser.providerData[0].uid
field أو منresult.additionalUserInfo.profile
.بينما تركز الأمثلة المذكورة أعلاه على تدفقات تسجيل الدخول ، يمكنك أيضًا ربط موفر Yahoo بمستخدم حالي باستخدام
linkWithPopup
/linkWithRedirect
. على سبيل المثال ، يمكنك ربط عدة موفرين لنفس المستخدم مما يسمح لهم بتسجيل الدخول باستخدام أي منهما.Web version 9
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. });
Web version 8
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. });
يمكن استخدام نفس النمط مع إعادة المصادقة مع
reauthenticateWithPopup
/ إعادة المصادقة مع إعادةreauthenticateWithRedirect
والتي يمكن استخدامها لاسترداد بيانات اعتماد جديدة للعمليات الحساسة التي تتطلب تسجيل دخول حديثًا.Web version 9
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. });
Web version 8
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 في أحد إضافات Chrome
إذا كنت بصدد إنشاء تطبيق ملحق Chrome ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:
- افتح مشروعك في وحدة تحكم Firebase .
- في قسم المصادقة ، افتح صفحة طريقة تسجيل الدخول .
- أضف URI مثل ما يلي إلى قائمة المجالات المصرح بها:
chrome-extension://CHROME_EXTENSION_ID
تتوفر فقط العمليات المنبثقة ( signInWithPopup
و linkWithPopup
و reauthenticateWithPopup
) لإضافات Chrome ، نظرًا لأن ملحقات Chrome لا يمكنها استخدام عمليات إعادة توجيه HTTP. يجب عليك استدعاء هذه الأساليب من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. لا يجوز استخدام الأساليب المنبثقة إلا في الامتدادات التي تستخدم Manifest V2 . يسمح إصدار Manifest V3 الأحدث فقط بنصوص الخلفية في شكل عمال خدمة ، ولا يمكنهم تنفيذ عمليات النوافذ المنبثقة على الإطلاق.
في ملف البيان الخاص بامتداد Chrome ، تأكد من إضافة https://apis.google.com
URL إلى content_security_policy
allowlist.
الخطوات التالية
بعد أن يقوم المستخدم بتسجيل الدخول لأول مرة ، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - المستخدم الذي قام بتسجيل الدخول باستخدام. يتم تخزين هذا الحساب الجديد كجزء من مشروع Firebase الخاص بك ، ويمكن استخدامه لتحديد هوية مستخدم عبر كل تطبيق في مشروعك ، بغض النظر عن كيفية تسجيل المستخدم للدخول.
في تطبيقاتك ، الطريقة الموصى بها لمعرفة حالة المصادقة للمستخدم الخاص بك هي تعيين مراقب على كائن
Auth
. يمكنك بعد ذلك الحصول على معلومات ملف التعريف الأساسية للمستخدم من كائنUser
. انظر إدارة المستخدمين .في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي ، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير
auth
، واستخدامه للتحكم في البيانات التي يمكن للمستخدم الوصول إليها.
يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام موفري مصادقة متعددين عن طريق ربط بيانات اعتماد موفر المصادقة بحساب مستخدم حالي.
لتسجيل خروج مستخدم ، signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });