ด้วย Firebase JS SDK คุณสามารถอนุญาตให้ผู้ใช้ Firebase ของคุณตรวจสอบสิทธิ์โดยใช้ผู้ให้บริการ OAuth ที่รองรับในสภาพแวดล้อม Cordova คุณสามารถผสานรวมผู้ให้บริการ OAuth ที่รองรับได้โดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ หรือโดยดำเนินการขั้นตอน OAuth ด้วยตนเองและส่งข้อมูลรับรอง OAuth ที่เป็นผลลัพธ์ไปยัง Firebase
ตั้งค่าการตรวจสอบสิทธิ์ Firebase สำหรับ Cordova
เพิ่ม Firebase ในโครงการ JavaScript ของคุณ เมื่อเพิ่มข้อมูลโค้ด Firebase ให้จดบันทึกตัวแปรการกำหนดค่า
authDomain
ซึ่งควรมีลักษณะดังนี้my-app.firebaseapp.com
หากใช้โดเมนที่กำหนดเองแทนโดเมนfirebaseapp.com
ที่จัดเตรียมโดย Firebase ควรใช้โดเมนที่กำหนดเองแทนหากต้องการตั้งค่าแอป Android ให้เพิ่มแอป Android ของคุณลงใน คอนโซล Firebase และป้อนรายละเอียดแอปของคุณ คุณไม่จำเป็นต้องสร้าง google-services.json
หากต้องการตั้งค่าแอป iOS ให้สร้างแอปพลิเคชัน iOS และเพิ่มลงใน คอนโซล Firebase คุณจะต้องมี ID ชุด iOS เพื่อเพิ่มในภายหลังเมื่อติดตั้งปลั๊กอิน Scheme URL ที่กำหนดเอง
เปิดใช้งานลิงก์ไดนามิกของ Firebase:
- ใน คอนโซล Firebase ให้เปิดส่วน ลิงก์แบบไดนามิก
หากคุณยังไม่ได้ยอมรับข้อกำหนดของลิงก์แบบไดนามิกและสร้างโดเมนลิงก์แบบไดนามิก ให้ดำเนินการทันที
หากคุณสร้างโดเมน Dynamic Links แล้ว โปรดจดบันทึกไว้ โดยทั่วไปโดเมนลิงก์แบบไดนามิกจะมีลักษณะเหมือนตัวอย่างต่อไปนี้:
example.page.link
คุณจะต้องใช้ค่านี้เมื่อกำหนดค่าแอป Apple หรือ Android เพื่อสกัดกั้นลิงก์ขาเข้า
เปิดใช้งานการลงชื่อเข้าใช้ Google ในคอนโซล Firebase:
- ใน คอนโซล Firebase ให้เปิดส่วน การตรวจสอบสิทธิ์
- บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานวิธี การลงชื่อเข้าใช้ Google แล้วคลิก บันทึก
ติดตั้งปลั๊กอินที่จำเป็นในโครงการ 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
เพิ่มการกำหนดค่าต่อไปนี้ลงในไฟล์ 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
Firebase Auth ขึ้นอยู่กับเหตุการณ์
deviceReady
เพื่อกำหนดสภาพแวดล้อม Cordova ปัจจุบันอย่างถูกต้อง ตรวจสอบให้แน่ใจว่าอินสแตนซ์ของแอป Firebase ได้รับการเริ่มต้นหลังจากเหตุการณ์นั้นถูกทริกเกอร์สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Google:
Web modular API
import { GoogleAuthProvider } from "firebase/auth/cordova"; const provider = new GoogleAuthProvider();
Web namespaced API
var provider = new firebase.auth.GoogleAuthProvider();
ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ Google โดยใช้
signInWithRedirect
โปรดทราบว่า Cordova ไม่รองรับsignInWithPopup
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; });
ในการจัดการกรณีที่กิจกรรมแอปถูกทำลายก่อนที่การลงชื่อเข้าใช้จะเสร็จสิ้น ให้เรียก
getRedirectResult
เมื่อแอปของคุณโหลด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; });
กลไกเดียวกันนี้สามารถใช้เพื่อเชื่อมโยงผู้ให้บริการใหม่ผ่าน
linkWithRedirect
หรือเพื่อตรวจสอบสิทธิ์อีกครั้งกับผู้ให้บริการที่มีอยู่โดยใช้reauthenticateWithRedirect