Xác thực bằng SSO Connect trong các ứng dụng web
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Nếu đã nâng cấp lên Firebase Authentication with Identity Platform, bạn có thể xác thực người dùng bằng
Firebase sử dụng nhà cung cấp theo chuẩn IDC (Open Connect Connect – OIDC) mà bạn đã chọn. Chiến dịch này
giúp bạn có thể sử dụng nhà cung cấp danh tính không được Firebase hỗ trợ sẵn.
Trước khi bắt đầu
Để người dùng đăng nhập bằng nhà cung cấp OIDC (OpenID Connect), trước tiên, bạn phải thu thập một số thông tin
từ nhà cung cấp:
Mã ứng dụng khách: Chuỗi duy nhất của nhà cung cấp giúp nhận dạng ứng dụng của bạn. Thông tin
có thể chỉ định cho bạn một mã ứng dụng khách khác cho từng nền tảng mà bạn hỗ trợ.
Đây là một trong các giá trị của thông báo xác nhận quyền sở hữu aud trong mã thông báo nhận dạng do
Google Cloud.
Mật khẩu ứng dụng khách: Chuỗi bí mật mà nhà cung cấp sử dụng để xác nhận quyền sở hữu
của một mã ứng dụng khách. Đối với mỗi mã ứng dụng khách, bạn cần có một mật khẩu ứng dụng khách trùng khớp.
(Giá trị này chỉ bắt buộc nếu bạn đang sử dụng quy trình mã xác thực, tức là
thực sự nên dùng.)
Công ty phát hành: Một chuỗi xác định nhà cung cấp. Giá trị này phải là một URL
khi được nối với /.well-known/openid-configuration, sẽ là vị trí
tài liệu khám phá OIDC (OpenID Connect) của nhà cung cấp. Ví dụ: nếu tổ chức phát hành là
https://auth.example.com, tài liệu khám phá phải có tại
https://auth.example.com/.well-known/openid-configuration
Sau khi bạn có các thông tin trên, hãy kích hoạt OpenID Connect làm thông tin đăng nhập
cho dự án Firebase của bạn:
Thêm Firebase vào dự án JavaScript của bạn.
Nếu bạn chưa nâng cấp lên Firebase Authentication with Identity Platform, hãy nâng cấp lên. Xác thực OpenID Connect
chỉ có trong các dự án đã nâng cấp.
Trên trang Nhà cung cấp dịch vụ đăng nhập
của bảng điều khiển Firebase, nhấp vào Thêm nhà cung cấp mới, sau đó nhấp vào
Kết nối OpenID.
Chọn xem bạn sẽ sử dụng quy trình mã uỷ quyền hay
quy trình cấp quyền ngầm ẩn.
Bạn nên luôn sử dụng luồng mã nếu nhà cung cấp hỗ trợ luồng mã này. Chiến lược phát hành đĩa đơn
luồng ngầm sẽ kém an toàn hơn và bạn không nên sử dụng luồng này.
Đặt tên cho nhà cung cấp này. Lưu ý mã nhà cung cấp được tạo:
chẳng hạn như oidc.example-provider. Bạn sẽ cần mã này khi thêm
vào ứng dụng của mình.
Chỉ định mã ứng dụng khách, mật khẩu ứng dụng khách và chuỗi nhà phát hành của nhà cung cấp.
Các giá trị này phải khớp chính xác với giá trị mà nhà cung cấp đã chỉ định cho bạn.
Lưu thay đổi.
Xử lý quy trình đăng nhập bằng Firebase SDK
Cách dễ nhất để xác thực người dùng với Firebase bằng OIDC (OpenID Connect)
xử lý toàn bộ quy trình đăng nhập bằng Firebase SDK.
Để xử lý quy trình đăng nhập bằng SDK JavaScript của Firebase, hãy làm theo các bước sau
các bước:
Tạo một thực thể của OAuthProvider bằng mã nhà cung cấp mà bạn có trong đó
bảng điều khiển của Firebase.
Web
import { OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider('oidc.example-provider');
Web
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
Không bắt buộc: Chỉ định những thông số OAuth tuỳ chỉnh khác mà bạn muốn
gửi cùng với yêu cầu OAuth.
Web
provider.setCustomParameters({
// Target specific email with login hint.
login_hint: 'user@example.com'
});
Web
provider.setCustomParameters({
// Target specific email with login hint.
login_hint: 'user@example.com'
});
Hãy liên hệ với nhà cung cấp của bạn để biết các tham số mà nhà cung cấp đó hỗ trợ.
Lưu ý rằng bạn không thể chuyển các thông số bắt buộc của Firebase bằng
setCustomParameters. Các tham số này là client_id,
response_type, redirect_uri, state, scope và
response_mode.
Không bắt buộc: Chỉ định các phạm vi OAuth 2.0 khác ngoài hồ sơ cơ bản
mà bạn muốn yêu cầu từ nhà cung cấp dịch vụ xác thực.
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Hãy liên hệ với nhà cung cấp của bạn để biết phạm vi mà nhà cung cấp đó hỗ trợ.
Xác thực bằng Firebase bằng đối tượng nhà cung cấp OAuth.
Bạn có thể chuyển hướng người dùng đến trang đăng nhập của nhà cung cấp hoặc mở
trong cửa sổ trình duyệt bật lên.
Quy trình chuyển hướng
Chuyển hướng đến trang đăng nhập của nhà cung cấp bằng cách gọi signInWithRedirect():
Web
import { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
Sau khi người dùng hoàn tất đăng nhập và quay lại ứng dụng của bạn, bạn có thể nhận được
bằng cách gọi getRedirectResult().
Web
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
const auth = getAuth();
getRedirectResult(auth)
.then((result) => {
// User is signed in.
// IdP data available in result.additionalUserInfo.profile.
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Web
firebase.auth().getRedirectResult()
.then((result) => {
// IdP data available in result.additionalUserInfo.profile.
// ...
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// OAuth access and id tokens can also be retrieved:
var accessToken = credential.accessToken;
var idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Quy trình bật lên
Web
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
const auth = getAuth();
signInWithPopup(auth, provider)
.then((result) => {
// User is signed in.
// IdP data available using getAdditionalUserInfo(result)
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Web
firebase.auth().signInWithPopup(provider)
.then((result) => {
// IdP data available in result.additionalUserInfo.profile.
// ...
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// OAuth access and id tokens can also be retrieved:
var accessToken = credential.accessToken;
var idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Mặc dù các ví dụ ở trên tập trung vào quy trình đăng nhập, bạn có thể sử dụng cùng một
để liên kết một nhà cung cấp OIDC (OpenID Connect) với người dùng hiện có bằng cách sử dụng
linkWithRedirect() và linkWithPopup(), đồng thời xác thực lại người dùng bằng
reauthenticateWithRedirect() và reauthenticateWithPopup(), có thể là
dùng để truy xuất thông tin đăng nhập mới cho những hoạt động nhạy cảm cần đến
lần đăng nhập gần đây.
Xử lý quy trình đăng nhập theo cách thủ công
Nếu đã triển khai quy trình đăng nhập bằng OpenID Connect trong ứng dụng của mình, bạn
có thể sử dụng trực tiếp mã thông báo nhận dạng để xác thực với Firebase:
Web
import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
idToken: idToken,
});
signInWithCredential(getAuth(), credential)
.then((result) => {
// User is signed in.
// IdP data available in result.additionalUserInfo.profile.
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Web
const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
.then((result) => {
// User is signed in.
// IdP data available in result.additionalUserInfo.profile.
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-30 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-30 UTC."],[],[],null,["If you've upgraded to Firebase Authentication with Identity Platform, you can authenticate your users with\nFirebase using the OpenID Connect (OIDC) compliant provider of your choice. This\nmakes it possible to use identity providers not natively supported by Firebase.\n\nBefore you begin\n\nTo sign in users using an OIDC provider, you must first collect some information\nfrom the provider:\n\n- **Client ID** : A string unique to the provider that identifies your app. Your\n provider might assign you a different client ID for each platform you support.\n This is one of the values of the `aud` claim in ID tokens issued by your\n provider.\n\n- **Client secret** : A secret string that the provider uses to confirm ownership\n of a client ID. For every client ID, you will need a matching client secret.\n (This value is required only if you're using the *auth code flow*, which is\n strongly recommended.)\n\n- **Issuer** : A string that identifies your provider. This value must be a URL\n that, when appended with `/.well-known/openid-configuration`, is the location\n of the provider's OIDC discovery document. For example, if the issuer is\n `https://auth.example.com`, the discovery document must be available at\n `https://auth.example.com/.well-known/openid-configuration`.\n\nAfter you have the above information, enable OpenID Connect as a sign-in\nprovider for your Firebase project:\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup).\n\n2. If you haven't upgraded to Firebase Authentication with Identity Platform, do so. OpenID Connect authentication\n is only available in upgraded projects.\n\n3. On the [**Sign-in providers**](//console.firebase.google.com/project/_/authentication/providers)\n page of the Firebase console, click **Add new provider** , and then click\n **OpenID Connect**.\n\n4. Select whether you will be using the *authorization code flow* or the\n *implicit grant flow*.\n\n **You should use always the code flow if your provider supports it**. The\n implicit flow is less secure and using it is strongly discouraged.\n5. Give a name to this provider. Note the provider ID that's generated:\n something like `oidc.example-provider`. You'll need this ID when you add\n sign-in code to your app.\n\n6. Specify your client ID and client secret, and your provider's issuer string.\n These values must exactly match the values your provider assigned to you.\n\n7. Save your changes.\n\nHandle the sign-in flow with the Firebase SDK\n\nThe easiest way to authenticate your users with Firebase using your OIDC\nprovider is to handle the entire sign-in flow with the Firebase SDK.\n\nTo handle the sign-in flow with the Firebase JavaScript SDK, follow these\nsteps:\n\n1. Create an instance of an `OAuthProvider` using the provider ID you got in\n the Firebase console.\n\n Web \n\n import { OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider('oidc.example-provider');\n\n Web \n\n var provider = new firebase.auth.OAuthProvider('oidc.example-provider');\n\n2. **Optional**: Specify additional custom OAuth parameters that you want to\n send with the OAuth request.\n\n Web \n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n Web \n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n Check with your provider for the parameters it supports.\n Note that you can't pass Firebase-required parameters with\n `setCustomParameters`. These parameters are `client_id`,\n `response_type`, `redirect_uri`, `state`, `scope` and\n `response_mode`.\n3. **Optional**: Specify additional OAuth 2.0 scopes beyond basic profile that\n you want to request from the authentication provider.\n\n Web \n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n Web \n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n Check with your provider for the scopes it supports.\n4. Authenticate with Firebase using the OAuth provider object.\n\n You can either redirect the user to the provider's sign-in page or open the\n sign-in page in a pop-up browser window.\n\n **Redirect flow**\n\n Redirect to the provider sign-in page by calling `signInWithRedirect()`: \n\n Web \n\n import { getAuth, signInWithRedirect } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithRedirect(auth, provider);\n\n Web \n\n firebase.auth().signInWithRedirect(provider);\n\n After the user completes sign-in and returns to your app, you can obtain the\n sign-in result by calling `getRedirectResult()`. \n\n Web \n\n import { getAuth, getRedirectResult, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n getRedirectResult(auth)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n Web \n\n firebase.auth().getRedirectResult()\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n **Pop-up flow** \n\n Web \n\n import { getAuth, signInWithPopup, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithPopup(auth, provider)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available using getAdditionalUserInfo(result)\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n Web \n\n firebase.auth().signInWithPopup(provider)\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n5. While the above examples focus on sign-in flows, you can use the same\n pattern to link an OIDC provider to an existing user using\n `linkWithRedirect()` and `linkWithPopup()`, and re-authenticate a user with\n `reauthenticateWithRedirect()` and `reauthenticateWithPopup()`, which can be\n used to retrieve fresh credentials for sensitive operations that require\n recent login.\n\nHandle the sign-in flow manually\n\nIf you've already implemented the OpenID Connect sign-in flow in your app, you\ncan use the ID token directly to authenticate with Firebase: \n\nWeb \n\n import { getAuth, signInWithCredential, OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n signInWithCredential(getAuth(), credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\nWeb \n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n firebase.auth().signInWithCredential(credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });"]]
