ข้อมูลประจำตัวแบบรวมศูนย์และการลงชื่อเข้าใช้ด้วยบัญชีโซเชียล

การตรวจสอบสิทธิ์ทางโซเชียลเป็นขั้นตอนการตรวจสอบสิทธิ์แบบหลายขั้นตอน ซึ่งช่วยให้คุณลงชื่อเข้าใช้บัญชีหรือลิงก์ผู้ใช้กับบัญชีที่มีอยู่ได้

ทั้งแพลตฟอร์มเนทีฟและเว็บรองรับการสร้างข้อมูลเข้าสู่ระบบ ซึ่งจะส่งไปยังเมธอด signInWithCredential หรือ linkWithCredential ได้ หรือในแพลตฟอร์มเว็บ คุณสามารถทริกเกอร์กระบวนการตรวจสอบสิทธิ์ผ่าน ป๊อปอัปหรือการเปลี่ยนเส้นทาง

Google

ระบบจะตั้งค่าส่วนใหญ่ไว้แล้วเมื่อใช้การลงชื่อเข้าใช้ด้วย Google กับ Firebase แต่คุณต้องตรวจสอบว่าได้กำหนดค่าคีย์ SHA1 ของเครื่องให้ใช้กับ Android แล้ว คุณดูวิธีสร้างคีย์ได้ในเอกสารประกอบเกี่ยวกับการตรวจสอบสิทธิ์

ตรวจสอบว่าได้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ "Google" ในFirebase คอนโซล (ไปที่แท็บความปลอดภัย > การตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้)

หากผู้ใช้ลงชื่อเข้าใช้ด้วย Google หลังจากที่ลงทะเบียนบัญชีด้วยตนเองแล้ว ผู้ให้บริการตรวจสอบสิทธิ์จะเปลี่ยนเป็น Google โดยอัตโนมัติเนื่องจากแนวคิดของผู้ให้บริการที่เชื่อถือได้ของ Firebase Authentication ดูข้อมูลเพิ่มเติมเกี่ยวกับ เรื่องนี้ได้ที่นี่

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 ด้วยแอป 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 Developer และทำตามกระบวนการตั้งค่าเพื่อเปิดใช้การเข้าสู่ระบบด้วย Facebook

ตรวจสอบว่าได้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ "Facebook" ในFirebase คอนโซล โดยตั้งค่ารหัสแอปและข้อมูลลับของ Facebook (ไปที่แท็บความปลอดภัย > การตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้)

iOS+ และ Android

ในแพลตฟอร์มเนทีฟ คุณต้องใช้ไลบรารีของบุคคลที่สามเพื่อติดตั้ง Facebook SDK และทริกเกอร์โฟลว์การตรวจสอบสิทธิ์

ติดตั้งปลั๊กอิน flutter_facebook_auth

คุณจะต้องทำตามขั้นตอนในเอกสารประกอบของปลั๊กอินเพื่อให้แน่ใจว่าได้เริ่มต้นใช้งานทั้ง Android และ iOS Facebook SDK อย่างถูกต้อง เมื่อเสร็จแล้ว ให้ทริกเกอร์ขั้นตอนการลงชื่อเข้าใช้ สร้างข้อมูลเข้าสู่ระบบของ 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!);
}

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

ตรวจสอบว่าได้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ "Twitter" ในFirebaseคอนโซล โดยตั้งค่าคีย์ API และข้อมูลลับ API (ไปที่แท็บความปลอดภัย > การตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้) ตรวจสอบว่าได้ตั้งค่า URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) เป็น URL เรียกกลับการให้สิทธิ์ในหน้าการตั้งค่าของแอปในการกำหนดค่าของแอป Twitter

นอกจากนี้ คุณอาจต้องขอสิทธิ์เข้าถึง API ที่สูงขึ้นโดยขึ้นอยู่กับแอปของคุณ

iOS+

คุณต้องกำหนดค่า URL Scheme ที่กำหนดเองตามที่อธิบายไว้ในขั้นตอนที่ 1 ของคู่มือ iOS

Android

หากยังไม่ได้ดำเนินการ ให้ระบุลายนิ้วมือ SHA-1 ของแอปโดยทำดังนี้

  1. ในFirebase คอนโซล ให้ไปที่ การตั้งค่า > แท็บทั่วไป

  2. เลื่อนลงไปที่การ์ดแอปของคุณ เลือกแอป 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 ที่กำหนดเองตามที่อธิบายไว้ในคู่มือ 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 (ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์ > แท็บวิธีการลงชื่อเข้าใช้) นอกจากนี้ โปรดตรวจสอบว่าได้ตั้งค่า URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น 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`

การลิงก์ผู้ให้บริการตรวจสอบสิทธิ์

หากต้องการลิงก์ผู้ให้บริการกับผู้ใช้ปัจจุบัน คุณสามารถใช้วิธีต่อไปนี้

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