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

Firebase JS SDK ile Firebase kullanıcılarınızın Cordova ortamında desteklenen herhangi bir OAuth sağlayıcısını kullanarak kimlik doğrulaması yapmasına izin verebilirsiniz. Oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak veya OAuth akışını manuel olarak gerçekleştirip elde edilen OAuth kimlik bilgilerini Firebase'e ileterek desteklenen herhangi bir OAuth sağlayıcısını entegre edebilirsiniz.

Cordova için Firebase Kimlik Doğrulamasını Ayarlama

  1. Firebase'i JavaScript projenize ekleyin . Firebase snippet'ini eklerken, my-app.firebaseapp.com gibi görünmesi gereken authDomain yapılandırma değişkenini not edin. Firebase tarafından sağlanan firebaseapp.com etki alanı yerine özel bir etki alanı kullanılıyorsa bunun yerine özel etki alanı kullanılmalıdır.

  2. Bir Android uygulaması kurmak için Android uygulamanızı Firebase konsoluna ekleyin ve uygulama ayrıntılarınızı girin. Oluşturulan google-services.json dosyasına ihtiyacınız yok.

  3. Bir iOS uygulaması kurmak için bir iOS uygulaması oluşturun ve bunu Firebase konsoluna ekleyin. Daha sonra özel URL şeması eklentisini yüklerken eklemek için iOS paket kimliğine ihtiyacınız olacak.

  4. Firebase Dinamik Bağlantılarını Etkinleştir:

    1. Firebase konsolunda Dinamik Bağlantılar bölümünü açın.
    2. Henüz Dinamik Bağlantılar şartlarını kabul etmediyseniz ve bir Dinamik Bağlantılar alanı oluşturmadıysanız bunu şimdi yapın.

      Zaten bir Dinamik Bağlantılar alanı oluşturduysanız bunu not edin. Dinamik Bağlantılar alanı genellikle aşağıdaki örneğe benzer:

      example.page.link

      Apple veya Android uygulamanızı gelen bağlantıyı kesecek şekilde yapılandırırken bu değere ihtiyacınız olacaktır.

  5. Firebase konsolunda Google ile Oturum Açmayı etkinleştirin:

    1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
    2. Oturum açma yöntemi sekmesinde Google 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ımındaki etki alanıdır ve DYNAMIC_LINK_DOMAIN (3c) adımındaki etki alanıdır.

    <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 şöyle 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>
    

    Özel bir alan adı auth.custom.domain.com kullanılıyorsa, my-app.firebaseapp.com bununla değiştirin.

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

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

Oturum açma akışını Firebase SDK ile yönetin

  1. Firebase Auth, mevcut Cordova ortamını doğru bir şekilde belirlemek için deviceReady olayına bağlıdır. Bu etkinlik tetiklendikten sonra Firebase Uygulaması örneğinin başlatıldığından emin olun.

  2. Google sağlayıcı nesnesinin bir örneğini oluşturun:

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth/cordova";
    
    const provider = new GoogleAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
  3. signInWithRedirect kullanarak Google sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. signInWithPopup Cordova'da desteklenmediğini unutmayın.

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

    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;
    });
  4. Oturum açma işlemi tamamlanmadan uygulama etkinliğinin yok edilmesi durumunu ele almak için uygulamanız yüklendiğinde getRedirectResult çağırın.

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

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

    Aynı mekanizma, yeni bir sağlayıcıyı linkWithRedirect aracılığıyla bağlamak veya reauthenticateWithRedirect kullanarak mevcut bir sağlayıcıyla yeniden kimlik doğrulamak için kullanılabilir.