Cordova ile OAuth Sağlayıcıları Kullanarak Kimlik Doğrulama

Firebase JS SDK sayesinde Firebase kullanıcılarınızın desteklenen OAuth sağlayıcıyı kullanmaya devam edebilirsiniz. Web sitemiz g.co/newsinitiative/labs üzerinden aşağıdaki işlemleri gerçekleştirmek için Firebase SDK'sını kullanarak, desteklenen herhangi bir OAuth sağlayıcısını yaparak veya OAuth akışını manuel olarak gerçekleştirip gerekli güncellemeleri Firebase için OAuth kimlik bilgisi.

Cordova için Firebase Authentication'ı ayarlama

  1. Firebase'i JavaScript projenize ekleyin. Bu Firebase snippet'i için authDomain yapılandırma değişkenini not edin. Bu değer my-app.firebaseapp.com şeklinde görünmelidir. Özel alan kullanılıyorsa Firebase tarafından sağlanan firebaseapp.com alanı yerine alan adı kullanılmalıdır.

  2. Android uygulaması ayarlamak için Android uygulamanızı Firebase konsoluna ekleyin ve uygulamanızın ayrıntılarını girin. Oluşturulan google-services.json olarak değiştirin.

  3. iOS uygulaması kurmak için bir iOS uygulaması oluşturun ve Firebase konsolu. Aşağıdaki durumlarda daha sonra ekleyeceğiniz iOS paket kimliğine ihtiyacınız olacaktır: özel URL şeması eklentisini yükleyin.

  4. Firebase Dynamic Links'i etkinleştirin:

    1. Firebase konsolunda Dinamik Bağlantılar bölümünü açın.

    2. Henüz Dynamic Links şartlarını kabul etmediyseniz ve bir Dynamic Links URL oluşturduysanız kullanıyorsanız bunu hemen yapın.

      Daha önce bir Dynamic Links alan oluşturduysanız bunu not edin. Dynamic Links alan genellikle aşağıdaki örnekteki gibi görünür:

      example.page.link

      Apple veya Android uygulamanızı aşağıdaki amaçlarla yapılandırırken bu değere ihtiyacınız olacaktır: izlemesi için bir istek oluşturur.

  5. Firebase konsolunda Google ile Oturum Açma özelliğini etkinleştirin:

    1. Firebase konsolunda Auth bölümünü açın.
    2. Oturum açma yöntemi sekmesinde, Google ile oturum açma yöntemini etkinleştirin ve Kaydet'i tıklayın.

  6. Cordova projenize gerekli eklentileri yükleyin.

    # 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. Aşağıdaki yapılandırmayı Cordova config.xml dosyanıza ekleyin. Burada, AUTH_DOMAIN, 1. adımdaki alan adı, DYNAMIC_LINK_DOMAIN ise alan adını girmeniz gerekir.

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

    Örnek bir yapılandırma aşağıdaki gibi görünebilir:

    <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 özel alan adı kullanılıyorsa şunu değiştirin: my-app.firebaseapp.com kazanmıştınız.

    Android uygulamasında launchMode için singleTask kullanılmalıdır.

    <preference name="AndroidLaunchMode" value="singleTask" />
ziyaret edin.

Oturum açma akışını Firebase SDK'sı ile yönetme

  1. Firebase Auth, şu işlemi yapmak için deviceReady etkinliğine bağlıdır: Cordova ortamını doğru şekilde değiştirmeniz gerekir. Firebase uygulaması örneğinin doğru olduğundan emin olun. o etkinlik tetiklendikten sonra başlatılır.

  2. Google provider nesnesinin bir örneğini oluşturun:

    Web

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

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web

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

  3. Google sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulama signInWithRedirect signInWithPopup özelliğinin Cordova'da desteklenmez.

    Web

    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

    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. Oturum açılmadan önce uygulama etkinliğinin silindiği durumları ele almak için işlem tamamlandı, uygulamanız olduğunda getRedirectResult numarasını arayın yükler.

    Web

    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

    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

    Aynı mekanizma üzerinden yeni bir sağlayıcı bağlamak için de kullanılabilir. linkWithRedirect veya mevcut bir sağlayıcıyla yeniden kimlik doğrulamak için reauthenticateWithRedirect kullanılıyor.