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ı kurmak 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 Dynamic Links bölümünü açın.

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

      Daha önce 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.

Not: Ionic çerçevesini kullanıyorsanız çerçevenin en son sürümü çerçevesi, uygulamanın şuna sahip kaynaklardan sunulduğundan emin olmak için kullanılmalıdır: file:// veya ionic:// şeması. Bu işlem, Firebase Auth'un signInWithRedirect işlemlerini düzgün şekilde işleyebilir. Firebase Auth Oluşturulsalar bile web tabanlı tarayıcı uygulamaları olarak http://localhost kaynakları kordova ortamında faaliyet gösteriyor.

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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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.