การตรวจสอบสิทธิ์ผ่านโซเชียลมีขั้นตอนการตรวจสอบสิทธิ์หลายขั้นตอน ซึ่งช่วยให้คุณลงชื่อเข้าใช้บัญชีของผู้ใช้หรือลิงก์ผู้ใช้กับบัญชีที่มีอยู่ได้
ทั้งแพลตฟอร์มเนทีฟและเว็บรองรับการสร้างข้อมูลเข้าสู่ระบบ ซึ่งสามารถส่งไปยังเมธอด 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 สำหรับนักพัฒนาแอปและทำตามขั้นตอนการตั้งค่าเพื่อเปิดใช้การเข้าสู่ระบบด้วย 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!);
}
Apple Game Center (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 ให้ไปที่
การตั้งค่า > ทั่วไป แท็บเลื่อนลงไปที่การ์ดแอปของคุณ เลือกแอป Android แล้วเพิ่มลายนิ้วมือ SHA-1 ในช่องลายนิ้วมือของใบรับรอง SHA
ดูรายละเอียดเกี่ยวกับวิธีรับลายนิ้วมือ SHA ของแอปได้ที่หัวข้อ การตรวจสอบสิทธิ์ไคลเอ็นต์
เว็บ
ใช้งานได้ทันที
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