ตรวจสอบสิทธิ์โดยใช้ผู้ให้บริการ 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 ให้เปิดส่วนลิงก์แบบไดนามิก

   2. หากคุณยังไม่ได้ยอมรับข้อกำหนดลิงก์แบบไดนามิกและสร้างลิงก์แบบไดนามิกแล้ว โดเมน ให้ดำเนินการในขณะนี้

      หากคุณสร้างโดเมนลิงก์แบบไดนามิกไว้แล้ว โปรดจดบันทึกไว้ ลิงก์แบบไดนามิก โดเมนมักจะมีลักษณะดังตัวอย่างต่อไปนี้

      example.page.link

      คุณจะต้องใช้ค่านี้เมื่อกำหนดค่าแอป Apple หรือ Android เป็น สกัดกั้นลิงก์ขาเข้า

5. เปิดใช้ Google Sign-In ในคอนโซล Firebase

   1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
   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