การตรวจสอบสิทธิ์ทางโซเชียลเป็นขั้นตอนการตรวจสอบสิทธิ์หลายขั้นตอน ซึ่งช่วยให้คุณลงชื่อเข้าใช้บัญชีหรือลิงก์ให้ผู้ใช้ได้ ด้วยข้อเสนอพิเศษที่มีอยู่
ทั้งแพลตฟอร์มดั้งเดิมและเว็บรองรับการสร้างข้อมูลเข้าสู่ระบบซึ่งจะส่งไปยัง signInWithCredential
หรือ linkWithCredential
เมธอด หรือในแพลตฟอร์มบนเว็บ คุณจะทริกเกอร์กระบวนการตรวจสอบสิทธิ์ผ่านก็ได้
ป๊อปอัปหรือการเปลี่ยนเส้นทาง
มีการกำหนดค่าส่วนใหญ่ไว้แล้วเมื่อใช้ Google Sign-In กับ Firebase แต่คุณต้องตรวจสอบว่าคอมพิวเตอร์ของคุณ คีย์ SHA1 ได้รับการกำหนดค่าเพื่อใช้กับ Android คุณสามารถดูวิธีสร้างคีย์ได้ใน เอกสารการตรวจสอบสิทธิ์
ตรวจสอบว่าช่อง "Google" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase
หากผู้ใช้ลงชื่อเข้าใช้ด้วย Google หลังจากลงทะเบียนบัญชีด้วยตนเองแล้ว ผู้ให้บริการตรวจสอบสิทธิ์จะ เปลี่ยนเป็น Google ตามแนวคิดการตรวจสอบสิทธิ์ Firebase ของผู้ให้บริการที่เชื่อถือได้ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ ที่นี่
iOS+ และ Android
ในแพลตฟอร์มเนทีฟ คุณต้องใช้ไลบรารีของบุคคลที่สามเพื่อทริกเกอร์ขั้นตอนการตรวจสอบสิทธิ์
ติดตั้งปลั๊กอิน google_sign_in
อย่างเป็นทางการ
เมื่อติดตั้งแล้ว ให้เรียกใช้ขั้นตอนการลงชื่อเข้าใช้และสร้างข้อมูลเข้าสู่ระบบใหม่ ดังนี้
import 'package:google_sign_in/google_sign_in.dart';
Future<UserCredential> signInWithGoogle() async {
// Trigger the authentication flow
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
// Obtain the auth details from the request
final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;
// Create a new credential
final credential = GoogleAuthProvider.credential(
accessToken: googleAuth?.accessToken,
idToken: googleAuth?.idToken,
);
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithCredential(credential);
}
เว็บ
สำหรับบนเว็บ Firebase SDK จะให้การสนับสนุนสำหรับการจัดการขั้นตอนการตรวจสอบสิทธิ์โดยอัตโนมัติโดยใช้โปรเจ็กต์ Firebase ของคุณ เช่น
สร้างผู้ให้บริการการตรวจสอบสิทธิ์ของ Google โดยระบุขอบเขตสิทธิ์เพิ่มเติม ที่คุณต้องการได้รับจากผู้ใช้:
GoogleAuthProvider googleProvider = GoogleAuthProvider();
googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
'login_hint': 'user@example.com'
});
ระบุข้อมูลเข้าสู่ระบบสำหรับเมธอด signInWithPopup
การดำเนินการนี้จะทริกเกอร์
ปรากฏขึ้นเพื่อแจ้งให้ผู้ใช้ลงชื่อเข้าใช้โปรเจ็กต์ หรือคุณสามารถใช้ signInWithRedirect
เพื่อเก็บ
ในหน้าต่างเดียวกัน
Future<UserCredential> signInWithGoogle() async {
// Create a new provider
GoogleAuthProvider googleProvider = GoogleAuthProvider();
googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
'login_hint': 'user@example.com'
});
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithPopup(googleProvider);
// Or use signInWithRedirect
// return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}
Google Play Games (Android เท่านั้น)
ตรวจสอบว่า "Play Games" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ทำตามวิธีการเหล่านี้เพื่อตั้งค่าโปรเจ็กต์ Firebase ของ Play Games
ทำตามวิธีการกำหนดค่าบริการเกมของ Play ด้วยแอป Firebase
Android
Future<void> _signInWithPlayGames() async {
// Get server auth code from 3rd party provider
// See PR description for details on how you might get the server auth code:
// https://github.com/firebase/flutterfire/pull/12201#issue-2100392487
final serverAuthCode = '...';
final playGamesCredential = PlayGamesAuthProvider.credential(
serverAuthCode: serverAuthCode);
await FirebaseAuth.instance
.signInWithCredential(playGamesCredential);
}
ก่อนเริ่มต้น ให้ตั้งค่าแอป Facebook Developer แล้วทำตามขั้นตอนการตั้งค่าเพื่อเปิดใช้การเข้าสู่ระบบ Facebook
ตรวจสอบว่า "Facebook" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ที่มีชุดรหัสแอปและข้อมูลลับของ Facebook
iOS+ และ Android
ในแพลตฟอร์มดั้งเดิม จะต้องมีไลบรารีของบุคคลที่สามเพื่อติดตั้ง Facebook SDK และทริกเกอร์ขั้นตอนการตรวจสอบสิทธิ์
ติดตั้งปลั๊กอิน flutter_facebook_auth
คุณจะต้องทำตามขั้นตอนในเอกสารประกอบของปลั๊กอินเพื่อให้แน่ใจว่าทั้งอุปกรณ์ Android และ เริ่มต้น Facebook SDK สำหรับ iOS แล้ว อย่างถูกต้อง เมื่อเสร็จแล้ว ให้เรียกใช้ขั้นตอนการลงชื่อเข้าใช้ สร้างข้อมูลเข้าสู่ระบบ Facebook แล้วลงชื่อเข้าใช้ให้ผู้ใช้
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
Future<UserCredential> signInWithFacebook() async {
// Trigger the sign-in flow
final LoginResult loginResult = await FacebookAuth.instance.login();
// Create a credential from the access token
final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);
// Once signed in, return the UserCredential
return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}
เว็บ
สำหรับบนเว็บ Firebase SDK จะให้การสนับสนุนสำหรับการจัดการขั้นตอนการตรวจสอบสิทธิ์โดยอัตโนมัติโดยใช้ รายละเอียดแอปพลิเคชัน Facebook ที่ระบุในคอนโซล Firebase เช่น
สร้างผู้ให้บริการ Facebook โดยระบุขอบเขตสิทธิ์เพิ่มเติม ที่คุณต้องการได้รับจากผู้ใช้
ตรวจสอบว่าได้เพิ่ม URI การเปลี่ยนเส้นทาง OAuth จากคอนโซล Firebase เป็น URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้อง ในแอป Facebook
FacebookAuthProvider facebookProvider = FacebookAuthProvider();
facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
'display': 'popup',
});
ระบุข้อมูลเข้าสู่ระบบสำหรับเมธอด signInWithPopup
การดำเนินการนี้จะทริกเกอร์
ปรากฏขึ้นเพื่อแจ้งให้ผู้ใช้ลงชื่อเข้าใช้แอปพลิเคชัน Facebook ของคุณ
Future<UserCredential> signInWithFacebook() async {
// Create a new provider
FacebookAuthProvider facebookProvider = FacebookAuthProvider();
facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
'display': 'popup',
});
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithPopup(facebookProvider);
// Or use signInWithRedirect
// return await FirebaseAuth.instance.signInWithRedirect(facebookProvider);
}
Apple
iOS ขึ้นไป
ก่อนเริ่มต้น ให้กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple และเปิดใช้ Apple เป็นผู้ให้บริการการลงชื่อเข้าใช้
ถัดไป ให้ดูว่าแอป Runner
ของคุณมีปุ่ม "ลงชื่อเข้าใช้ด้วย Apple" แบบพื้นฐาน
Android
ก่อนเริ่มต้น ให้กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple และเปิดใช้ Apple เป็นผู้ให้บริการการลงชื่อเข้าใช้
เว็บ
ก่อนเริ่มต้น ให้กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple และเปิดใช้ Apple เป็นผู้ให้บริการการลงชื่อเข้าใช้
import 'package:firebase_auth/firebase_auth.dart';
Future<UserCredential> signInWithApple() async {
final appleProvider = AppleAuthProvider();
if (kIsWeb) {
await FirebaseAuth.instance.signInWithPopup(appleProvider);
} else {
await FirebaseAuth.instance.signInWithProvider(appleProvider);
}
}
ลงชื่อเข้าใช้แพลตฟอร์ม Apple เท่านั้น
นอกจากนี้ยังสามารถลงชื่อเข้าใช้ Apple บนแพลตฟอร์ม iOS+ ได้ด้วยวิธีต่อไปนี้
// Implement a function that generates a nonce. See iOS documentation for how to create a nonce:
// https://firebase.google.com/docs/auth/ios/apple#sign_in_with_apple_and_authenticate_with_firebase
String rawNonce = createNonce();
// Create a SHA-256 hash of the nonce. Consider using the `crypto` package from the pub.dev registry.
String hashSHA256String = createHashSHA256String(rawNonce);
// Use the hash of the nonce to get the idToken. Consider using the `sign_in_with_apple` plugin from the pub.dev registry.
String idToken = await getIdToken();
final fullName = AppleFullPersonName(
familyName: 'Name',
givenName: 'Your',
);
// Use the `rawNonce` and `idToken` to get the credential
final credential = AppleAuthProvider.credentialWithIDToken(
idToken,
rawNonce,
fullName,
);
await FirebaseAuth.instance.signInWithCredential(credential);
เพิกถอนโทเค็นการตรวจสอบสิทธิ์ของ Apple
การลงชื่อเข้าใช้ Apple ในแพลตฟอร์มของ Apple จะแสดงรหัสการให้สิทธิ์ที่ใช้ได้
เพื่อเพิกถอนโทเค็นการตรวจสอบสิทธิ์ของ Apple โดยใช้ revokeTokenWithAuthorizationCode()
API
import 'package:firebase_auth/firebase_auth.dart';
Future<UserCredential> signInWithApple() async {
final appleProvider = AppleAuthProvider();
UserCredential userCredential = await FirebaseAuth.instance.signInWithPopup(appleProvider);
// Keep the authorization code returned from Apple platforms
String? authCode = userCredential.additionalUserInfo?.authorizationCode;
// Revoke Apple auth token
await FirebaseAuth.instance.revokeTokenWithAuthorizationCode(authCode!);
}
Apple Game Center (Apple เท่านั้น)
ตรวจสอบ "เกมเซ็นเตอร์" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ทำตามวิธีการเหล่านี้สำหรับการตั้งค่าโปรเจ็กต์ Firebase ของ Game Center
คุณต้องเข้าสู่ระบบด้วย Game Center ก่อนจึงจะออกและเข้าสู่ระบบของ Firebase Game Center ผ่าน Firebase ได้ ดูวิธีการ จะประสบความสำเร็จได้อย่างไร
iOS ขึ้นไป
Future<void> _signInWithGameCenter() async {
final credential = GameCenterAuthProvider.credential();
await FirebaseAuth.instance
.signInWithCredential(credential);
}
Microsoft
iOS ขึ้นไป
ก่อนที่คุณจะเริ่มกำหนดค่าการเข้าสู่ระบบ Microsoft สำหรับ iOS และเพิ่มรูปแบบ URL ที่กำหนดเอง ให้กับ Runner ของคุณ (ขั้นตอนที่ 1)
Android
ก่อนที่จะเริ่มกำหนดค่าการเข้าสู่ระบบ Microsoft สำหรับ Android
อย่าลืมเพิ่มลายนิ้วมือ SHA-1 ของแอป
เว็บ
import 'package:firebase_auth/firebase_auth.dart';
Future<UserCredential> signInWithMicrosoft() async {
final microsoftProvider = MicrosoftAuthProvider();
if (kIsWeb) {
await FirebaseAuth.instance.signInWithPopup(microsoftProvider);
} else {
await FirebaseAuth.instance.signInWithProvider(microsoftProvider);
}
}
ตรวจสอบว่า "Twitter" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ด้วยคีย์ API และชุดข้อมูลลับ API ตรวจสอบ URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) มีการตั้งค่าเป็น URL เรียกกลับเรื่องการให้สิทธิ์ในหน้าการตั้งค่าของแอปในการกำหนดค่าของแอป Twitter
นอกจากนี้คุณอาจต้องขอการเข้าถึง API เพิ่มเติมโดยขึ้นอยู่กับแอปของคุณ
iOS ขึ้นไป
คุณต้องกำหนดค่า Scheme ของ URL ที่กำหนดเองตามที่อธิบายไว้ในคำแนะนำของ iOS ขั้นตอนที่ 1
Android
หากคุณยังไม่ได้ระบุลายนิ้วมือ SHA-1 ของแอป ให้ระบุจากหน้าการตั้งค่า ของคอนโซล Firebase โปรดดูการตรวจสอบสิทธิ์ไคลเอ็นต์เพื่อดูรายละเอียดเกี่ยวกับวิธีรับลายนิ้วมือ SHA-1 ของแอป
เว็บ
ทำงานได้ทันที
import 'package:firebase_auth/firebase_auth.dart';
Future<void> _signInWithTwitter() async {
TwitterAuthProvider twitterProvider = TwitterAuthProvider();
if (kIsWeb) {
await FirebaseAuth.instance.signInWithPopup(twitterProvider);
} else {
await FirebaseAuth.instance.signInWithProvider(twitterProvider);
}
}
GitHub
ตรวจสอบว่าคุณได้ตั้งค่าแอป OAuth จากการตั้งค่านักพัฒนาซอฟต์แวร์ GitHub และ ว่า "GitHub" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase แล้ว ที่มีการตั้งค่า Client-ID และข้อมูลลับไว้ โดยมีการตั้งค่า URL เรียกกลับในแอป GitHub
iOS+ และ Android
สำหรับแพลตฟอร์มเนทีฟ คุณต้องเพิ่ม google-services.json
และ GoogleService-Info.plist
สำหรับ iOS ให้เพิ่มรูปแบบ URL ที่กำหนดเองตามที่อธิบายไว้ในคู่มือ iOS ขั้นตอนที่ 1
Future<UserCredential> signInWithGitHub() async {
// Create a new provider
GithubAuthProvider githubProvider = GithubAuthProvider();
return await FirebaseAuth.instance.signInWithProvider(githubProvider);
}
เว็บ
บนเว็บ GitHub SDK ให้การสนับสนุนสำหรับการจัดการขั้นตอนการตรวจสอบสิทธิ์โดยอัตโนมัติโดยใช้ รายละเอียดแอปพลิเคชัน GitHub ที่ระบุไว้ในคอนโซล Firebase ตรวจสอบว่าได้เพิ่ม URL เรียกกลับในคอนโซล Firebase แล้ว เป็น URL เรียกกลับในแอปพลิเคชัน GitHub บน Play Console
เช่น
สร้างผู้ให้บริการ GitHub และระบุข้อมูลเข้าสู่ระบบสำหรับเมธอด signInWithPopup
การดำเนินการนี้จะทริกเกอร์
ปรากฏขึ้นเพื่อแจ้งให้ผู้ใช้ลงชื่อเข้าใช้แอปพลิเคชัน GitHub:
Future<UserCredential> signInWithGitHub() async {
// Create a new provider
GithubAuthProvider githubProvider = GithubAuthProvider();
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithPopup(githubProvider);
// Or use signInWithRedirect
// return await FirebaseAuth.instance.signInWithRedirect(githubProvider);
}
Yahoo
ตรวจสอบว่า "Yahoo" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ด้วยคีย์ API และชุดข้อมูลลับ API และตรวจสอบ URI การเปลี่ยนเส้นทาง Firebase OAuth (เช่น my-app-12345.firebaseapp.com/__/auth/handler) ได้รับการตั้งค่าเป็น URI การเปลี่ยนเส้นทางในการกำหนดค่าเครือข่ายนักพัฒนาซอฟต์แวร์ของ Yahoo ของแอป
iOS ขึ้นไป
ก่อนเริ่มต้น ให้กำหนดค่าการเข้าสู่ระบบ Yahoo สำหรับ iOS และเพิ่มแบบแผน URL ที่กำหนดเอง ให้กับ Runner ของคุณ (ขั้นตอนที่ 1)
Android
ก่อนที่จะเริ่มต้น ให้กำหนดค่าการเข้าสู่ระบบ Yahoo สำหรับ Android
อย่าลืมเพิ่มลายนิ้วมือ SHA-1 ของแอป
เว็บ
ทำงานได้ทันที
import 'package:firebase_auth/firebase_auth.dart';
Future<UserCredential> signInWithYahoo() async {
final yahooProvider = YahooAuthProvider();
if (kIsWeb) {
await _auth.signInWithPopup(yahooProvider);
} else {
await _auth.signInWithProvider(yahooProvider);
}
}
การใช้โทเค็นเพื่อการเข้าถึง OAuth
เมื่อใช้ AuthProvider คุณจะเรียกโทเค็นเพื่อการเข้าถึงที่เชื่อมโยงกับผู้ให้บริการได้ โดยส่งคำขอต่อไปนี้
final appleProvider = AppleAuthProvider();
final user = await FirebaseAuth.instance.signInWithProvider(appleProvider);
final accessToken = user.credential?.accessToken;
// You can send requests with the `accessToken`
การลิงก์ผู้ให้บริการตรวจสอบสิทธิ์
หากต้องการลิงก์ผู้ให้บริการกับผู้ใช้ปัจจุบัน ให้ใช้วิธีการต่อไปนี้ ลูกดอก รอ FirebaseAuth.instance.signInonymly();
สุดท้าย appleProvider = AppleAuthProvider();
if (kIsWeb) { รอ FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);
// นอกจากนี้คุณยังใช้ linkWithRedirect
ได้ด้วย
} else {
รอ FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider);
}
// ตอนนี้ระบบได้อัปเกรดให้คุณเป็นผู้ใช้ที่ไม่ระบุชื่อแล้วให้เชื่อมต่อกับฟีเจอร์ลงชื่อเข้าใช้ด้วย Apple ได้ ""
ตรวจสอบสิทธิ์กับผู้ให้บริการอีกครั้ง
รูปแบบเดียวกันนี้สามารถใช้กับ reauthenticateWithProvider
ซึ่งสามารถใช้เพื่อเรียกข้อมูลใหม่
ข้อมูลเข้าสู่ระบบสำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องมีการเข้าสู่ระบบล่าสุด
final appleProvider = AppleAuthProvider();
if (kIsWeb) {
await FirebaseAuth.instance.currentUser?.reauthenticateWithPopup(appleProvider);
// Or you can reauthenticate with a redirection
// await FirebaseAuth.instance.currentUser?.reauthenticateWithRedirect(appleProvider);
} else {
await FirebaseAuth.instance.currentUser?.reauthenticateWithProvider(appleProvider);
}
// You can now perform sensitive operations