احراز هویت با استفاده از ارائه دهندگان OAuth با Cordova

با Firebase JS SDK، می توانید به کاربران Firebase خود اجازه دهید با استفاده از هر ارائه دهنده OAuth پشتیبانی شده در محیط Cordova احراز هویت کنند. می‌توانید هر ارائه‌دهنده OAuth پشتیبانی‌شده را با استفاده از Firebase SDK برای انجام جریان ورود به سیستم، یا با انجام دستی جریان OAuth و ارسال اعتبار OAuth حاصل به Firebase، ادغام کنید.

احراز هویت Firebase را برای Cordova تنظیم کنید

  1. Firebase را به پروژه جاوا اسکریپت خود اضافه کنید . هنگام اضافه کردن قطعه Firebase، به متغیر پیکربندی authDomain توجه داشته باشید که باید شبیه my-app.firebaseapp.com باشد. اگر یک دامنه سفارشی به جای دامنه Firebase ارائه شده firebaseapp.com استفاده می شود، دامنه سفارشی باید به جای آن استفاده شود.

  2. برای راه اندازی یک برنامه اندروید، برنامه اندروید خود را به کنسول Firebase اضافه کنید و جزئیات برنامه خود را وارد کنید. شما به google-services.json تولید شده نیاز ندارید.

  3. برای راه اندازی یک برنامه iOS، یک برنامه iOS ایجاد کنید و آن را به کنسول Firebase اضافه کنید. هنگام نصب افزونه طرح URL سفارشی، به شناسه بسته iOS نیاز دارید تا بعداً اضافه کنید.

  4. فعال کردن Firebase Dynamic Links:

    1. در کنسول Firebase ، بخش Dynamic Links را باز کنید.

    2. اگر هنوز شرایط Dynamic Links را نپذیرفته اید و دامنه Dynamic Links ایجاد نکرده اید، اکنون این کار را انجام دهید.

      اگر قبلاً یک دامنه پیوندهای پویا ایجاد کرده‌اید، به آن توجه داشته باشید. یک دامنه Dynamic Links معمولاً مانند مثال زیر است:

      example.page.link

      هنگامی که برنامه Apple یا Android خود را برای رهگیری پیوند ورودی پیکربندی می کنید، به این مقدار نیاز خواهید داشت.

  5. Google Sign-In را در کنسول Firebase فعال کنید:

    1. در کنسول Firebase ، بخش Auth را باز کنید.
    2. در برگه روش ورود به سیستم ، روش ورود به سیستم Google را فعال کنید و روی ذخیره کلیک کنید.

  6. پلاگین های مورد نیاز را در پروژه Cordova خود نصب کنید.

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
# Plugin to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin-fix --save
# Plugin to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
# Plugin to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
# Plugin to handle deep linking through Custom Scheme for iOS
# Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable \
    URL_SCHEME=com.firebase.cordova --save

  7. پیکربندی زیر را به فایل Cordova config.xml خود اضافه کنید، جایی که AUTH_DOMAIN دامنه مرحله (1) و DYNAMIC_LINK_DOMAIN دامنه مرحله (3c) است.

    <universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    یک پیکربندی نمونه ممکن است به این صورت باشد:

    <universal-links>
    <host name="example.page.link" scheme="https" />
    <host name="example-app.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    اگر از دامنه سفارشی auth.custom.domain.com استفاده می شود، my-app.firebaseapp.com را جایگزین آن کنید.

    برای برنامه اندروید باید از singleTask برای launchMode استفاده شود.

    <preference name="AndroidLaunchMode" value="singleTask" />

جریان ورود به سیستم را با Firebase SDK مدیریت کنید

  1. Firebase Auth برای تعیین صحیح محیط فعلی Cordova به رویداد deviceReady بستگی دارد. اطمینان حاصل کنید که نمونه برنامه Firebase پس از شروع آن رویداد مقداردهی اولیه شده است.

  2. یک نمونه از شی ارائه دهنده Google ایجاد کنید:

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web namespaced API

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

  3. با Firebase با استفاده از شی ارائه دهنده Google با استفاده از signInWithRedirect احراز هویت کنید. توجه داشته باشید که signInWithPopup در Cordova پشتیبانی نمی شود.

    Web modular API

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

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google 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;
  });
    auth_cordova_sign_in_redirect.js

    Web namespaced API

    firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).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;
});
    cordova.js

  4. برای رسیدگی به مواردی که فعالیت برنامه قبل از اتمام عملیات ورود به سیستم از بین می‌رود، هنگام بارگیری برنامه getRedirectResult تماس بگیرید.

    Web modular API

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    if (credential) {        
      // This gives you a Google Access Token.
      // You can use it to access the Google 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;
  });
    auth_cordova_redirect_result.js

    Web namespaced API

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

    از همین مکانیسم می توان برای پیوند دادن یک ارائه دهنده جدید از طریق linkWithRedirect یا برای احراز هویت مجدد با ارائه دهنده موجود با استفاده از reauthenticateWithRedirect استفاده کرد.