การตรวจสอบสิทธิ์ด้วยบัญชีโซเชียลเป็นขั้นตอนการตรวจสอบสิทธิ์แบบหลายขั้นตอน ซึ่งช่วยให้คุณลงชื่อเข้าใช้บัญชีของผู้ใช้หรือลิงก์ผู้ใช้กับบัญชีที่มีอยู่ได้
ทั้งแพลตฟอร์มเนทีฟและเว็บรองรับการสร้างข้อมูลเข้าสู่ระบบที่สามารถส่งไปยังเมธอด 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.instance.authenticate();
// Obtain the auth details from the request
final GoogleSignInAuthentication googleAuth = googleUser.authentication;
// Create a new credential
final credential = GoogleAuthProvider.credential(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 Games กับแอป 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
คุณจะต้องทำตามขั้นตอนในเอกสารประกอบของปลั๊กอินเพื่อให้แน่ใจว่าได้เริ่มต้น Facebook SDK ทั้งของ Android และ 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 ได้โดยใช้ API revokeTokenWithAuthorizationCode()
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!);
}
Game Center ของ Apple (Apple เท่านั้น)
ตรวจสอบว่าได้เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ "Game Center" ใน คอนโซล 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 ของแอป
เว็บ
ก่อนเริ่มต้น ให้กำหนดค่าการเข้าสู่ระบบด้วยบัญชี Microsoft สำหรับเว็บ
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 Secret ตรวจสอบว่าได้ตั้งค่า URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) เป็น URL เรียกกลับเรื่องการให้สิทธิ์ในหน้าการตั้งค่าของแอปในการกำหนดค่าแอป Twitter แล้ว
นอกจากนี้ คุณอาจต้องขอสิทธิ์เข้าถึง API ระดับสูงขึ้นอยู่กับแอปของคุณ
iOS+
คุณต้องกำหนดค่า URL Scheme ที่กำหนดเองตามที่ อธิบายไว้ในขั้นตอนที่ 1 ของคู่มือ iOS
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 โดยตั้งค่ารหัสไคลเอ็นต์และข้อมูลลับ รวมถึงตั้งค่า URL เรียกกลับในแอป GitHub แล้ว
iOS+ และ Android
สำหรับแพลตฟอร์มเนทีฟ คุณต้องเพิ่ม google-services.json และ GoogleService-Info.plist
สำหรับ iOS ให้เพิ่ม URL Scheme ที่กำหนดเองตามที่ อธิบายไว้ในคู่มือ 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 ในคอนโซลนักพัฒนาแอปแล้ว
เช่น
สร้างผู้ให้บริการ 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 Secret นอกจากนี้ ตรวจสอบว่าได้ตั้งค่า URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) เป็น URI การเปลี่ยนเส้นทางในการกำหนดค่า Yahoo Developer Network ของแอปแล้ว
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`
การลิงก์ผู้ให้บริการการตรวจสอบสิทธิ์
หากต้องการลิงก์ผู้ให้บริการกับผู้ใช้ปัจจุบัน คุณสามารถใช้วิธีต่อไปนี้
await FirebaseAuth.instance.signInAnonymously();
final appleProvider = AppleAuthProvider();
if (kIsWeb) {
await FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);
// You can also use `linkWithRedirect`
} else {
await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider);
}
// You're anonymous user is now upgraded to be able to connect with Sign In With 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