ตรวจสอบสิทธิ์โดยใช้ผู้ให้บริการ OAuth ด้วย Cordova

ด้วย Firebase JS SDK คุณสามารถให้ผู้ใช้ Firebase ตรวจสอบสิทธิ์โดยใช้ ผู้ให้บริการ OAuth ที่รองรับในสภาพแวดล้อม Cordova คุณสามารถผสานรวม ผู้ให้บริการ OAuth ทุกรายที่สนับสนุน โดยใช้ Firebase SDK เพื่อดำเนินการ ขั้นตอนการลงชื่อเข้าใช้ หรือโดยดำเนินการตามขั้นตอน OAuth ด้วยตนเองและส่งผ่าน OAuth ที่เป็นข้อมูลเข้าสู่ระบบ Firebase

ตั้งค่าการตรวจสอบสิทธิ์ Firebase สำหรับ Cordova

1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript เมื่อเพิ่ม ข้อมูลโค้ด Firebase ให้บันทึกตัวแปรการกำหนดค่า authDomain ซึ่งควรมีลักษณะเช่นนี้ my-app.firebaseapp.com หากใช้โดเมนที่กำหนดเอง แทนที่จะเป็นโดเมน firebaseapp.com ที่จัดสรรโดย Firebase ระบบจะกำหนดค่า ควรใช้โดเมนแทน

2. หากต้องการตั้งค่าแอป Android ให้เพิ่มแอป Android ไปยังคอนโซล Firebase และป้อนรายละเอียดแอปของคุณ คุณไม่จำเป็นต้องมี google-services.json

3. ในการตั้งค่าแอป iOS ให้สร้างแอปพลิเคชัน iOS แล้วเพิ่มลงใน คอนโซล Firebase คุณจะต้องใช้รหัสชุด iOS เพื่อเพิ่มในภายหลังเมื่อ การติดตั้งปลั๊กอินรูปแบบ URL ที่กำหนดเอง

4. เปิดใช้ลิงก์แบบไดนามิกของ Firebase:

   1. ในคอนโซล Firebase ให้เปิดส่วน Dynamic Links

   2. หากคุณยังไม่ได้ยอมรับข้อกำหนด Dynamic Links และสร้าง 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 ด้วย

   สำหรับแอปพลิเคชัน Android singleTask ควรใช้สำหรับ launchMode

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

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

1. การตรวจสอบสิทธิ์ Firebase ขึ้นอยู่กับเหตุการณ์ deviceReady เพื่อระบุ ของสภาพแวดล้อม Cordova ในปัจจุบันอย่างถูกต้อง ตรวจสอบอินสแตนซ์ของแอป Firebase จะเริ่มต้นขึ้นหลังจากทริกเกอร์เหตุการณ์นั้น

2. สร้างอินสแตนซ์ของออบเจ็กต์ผู้ให้บริการ Google ดังนี้

   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. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการของ Google ที่ใช้ signInWithRedirect โปรดทราบว่าsignInWithPopup ไม่รองรับใน Cordova

   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. จัดการกรณีที่กิจกรรมบนแอปถูกทำลายก่อนการลงชื่อเข้าใช้ การดำเนินการเสร็จสมบูรณ์ ให้เรียกใช้ getRedirectResult เมื่อแอปของคุณ โหลดขึ้นมา

   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

   คุณสามารถใช้กลไกเดียวกันนี้เพื่อลิงก์ผู้ให้บริการใหม่ผ่าน linkWithRedirect หรือตรวจสอบสิทธิ์อีกครั้งกับผู้ให้บริการที่มีอยู่ ด้วย reauthenticateWithRedirect