Nút đăng xuất javascript

Bạn có thể cho phép người dùng của mình xác thực với Firebase bằng Tài khoản Google của họ. Bạn có thể sử dụng SDK Firebase để thực hiện quy trình đăng nhập bằng Google hoặc thực hiện quy trình đăng nhập theo cách thủ công bằng cách sử dụng thư viện Đăng nhập bằng Google và chuyển mã thông báo ID kết quả cho Firebase

Trước khi bắt đầu

Thêm Firebase vào dự án JavaScript của bạn
Bật Google làm phương thức đăng nhập trong bảng điều khiển Firebase
1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực
2. Trên tab Phương thức đăng nhập, bật phương thức đăng nhập Google và nhấp vào Lưu

Xử lý luồng đăng nhập bằng SDK Firebase

Nếu bạn đang xây dựng ứng dụng web, cách dễ nhất để xác thực người dùng của bạn bằng Firebase bằng Tài khoản Google của họ là xử lý luồng đăng nhập bằng SDK JavaScript của Firebase. (Nếu bạn muốn xác thực người dùng trong Node. js hoặc môi trường không có trình duyệt khác, bạn phải xử lý quy trình đăng nhập theo cách thủ công. )

Để xử lý quy trình đăng nhập bằng SDK JavaScript Firebase, hãy làm theo các bước sau

Tạo một thể hiện của đối tượng nhà cung cấp Google
Phiên bản web 9
Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js
```
Phiên bản web 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
Không bắt buộc. Chỉ định OAuth 2 bổ sung. 0 phạm vi mà bạn muốn yêu cầu từ nhà cung cấp xác thực. Để thêm phạm vi, hãy gọi
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
3. Ví dụ
Phiên bản web 9
Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Phiên bản web 8
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
Xem tài liệu của nhà cung cấp xác thực
Không bắt buộc. Để bản địa hóa luồng OAuth của nhà cung cấp sang ngôn ngữ ưa thích của người dùng mà không chuyển rõ ràng các tham số OAuth tùy chỉnh có liên quan, hãy cập nhật mã ngôn ngữ trên phiên bản Auth trước khi bắt đầu luồng OAuth. Ví dụ
Phiên bản web 9
Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js
```
Phiên bản web 8
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Không bắt buộc. Chỉ định các tham số nhà cung cấp OAuth tùy chỉnh bổ sung mà bạn muốn gửi cùng với yêu cầu OAuth. Để thêm một tham số tùy chỉnh, hãy gọi
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
4 trên nhà cung cấp đã khởi tạo với một đối tượng chứa khóa như được chỉ định bởi tài liệu của nhà cung cấp OAuth và giá trị tương ứng. Ví dụ
Phiên bản web 9
Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8. ________số 8
Phiên bản web 8
```
provider.setCustomParameters({
  'login_hint': '[email protected]'
});google-signin.js
```
Các tham số OAuth bắt buộc dành riêng không được phép và sẽ bị bỏ qua. Xem tài liệu tham khảo nhà cung cấp xác thực để biết thêm chi tiết
Xác thực với Firebase bằng đối tượng nhà cung cấp của Google. Bạn có thể nhắc người dùng của mình đăng nhập bằng Tài khoản Google của họ bằng cách mở cửa sổ bật lên hoặc bằng cách chuyển hướng đến trang đăng nhập. Phương pháp chuyển hướng được ưu tiên trên thiết bị di động
- Để đăng nhập bằng cửa sổ bật lên, hãy gọi
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
  5
  Phiên bản web 9
  Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  1
  Phiên bản web 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  2
  Ngoài ra, hãy lưu ý rằng bạn có thể truy xuất mã thông báo OAuth của nhà cung cấp Google. Mã này có thể được sử dụng để tìm nạp dữ liệu bổ sung bằng API của Google
  Đây cũng là nơi bạn có thể bắt và xử lý lỗi. Để biết danh sách các mã lỗi, hãy xem Tài liệu tham khảo Auth
- Để đăng nhập bằng cách chuyển hướng đến trang đăng nhập, hãy gọi
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
  6
  Phiên bản web 9
  Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  0
  Phiên bản web 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  1
  Sau đó, bạn cũng có thể truy xuất mã thông báo OAuth của nhà cung cấp Google bằng cách gọi
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
  7 khi trang của bạn tải
  Phiên bản web 9
  Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  2
  Phiên bản web 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  3
  Đây cũng là nơi bạn có thể bắt và xử lý lỗi. Để biết danh sách các mã lỗi, hãy xem Tài liệu tham khảo Auth

Xử lý lỗi tài khoản tồn tại với thông tin xác thực khác nhau

Google đóng vai trò vừa là nhà cung cấp email vừa là nhà cung cấp danh tính xã hội. IDP email có thẩm quyền đối với tất cả các địa chỉ email liên quan đến miền email được lưu trữ của họ trong khi IDP xã hội xác nhận danh tính email dựa trên việc xác nhận địa chỉ email một lần. Người dùng đăng nhập bằng Google sẽ không bao giờ gây ra lỗi này khi tài khoản của họ được lưu trữ tại Google ngay cả khi họ đã đăng ký tài khoản bằng mật khẩu hoặc IDP xã hội

Nếu bạn đã bật cài đặt Một tài khoản cho mỗi địa chỉ email trong bảng điều khiển Firebase, thì khi người dùng cố đăng nhập vào một nhà cung cấp (chẳng hạn như Google) bằng email đã tồn tại cho nhà cung cấp của người dùng Firebase khác (chẳng hạn như Facebook), sẽ xảy ra lỗi . Để hoàn tất đăng nhập vào nhà cung cấp dự định, trước tiên, người dùng phải đăng nhập vào nhà cung cấp hiện có (Facebook) rồi liên kết với

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

9 cũ (mã thông báo Google ID)

Chế độ bật lên

Nếu bạn sử dụng

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

5, bạn có thể xử lý lỗi

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

8 bằng mã như ví dụ sau

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

chế độ chuyển hướng

Lỗi này được xử lý theo cách tương tự trong chế độ chuyển hướng, với điểm khác biệt là thông tin xác thực đang chờ xử lý phải được lưu vào bộ đệm ẩn giữa các lần chuyển hướng trang (ví dụ: sử dụng lưu trữ phiên)

Nâng cao. Xử lý quy trình đăng nhập theo cách thủ công

Bạn cũng có thể xác thực với Firebase bằng Tài khoản Google bằng cách xử lý quy trình đăng nhập bằng thư viện Đăng nhập bằng Google

Tích hợp Đăng nhập bằng Google vào ứng dụng của bạn bằng cách làm theo hướng dẫn tích hợp. Đảm bảo định cấu hình Đăng nhập bằng Google bằng ID ứng dụng khách Google được tạo cho dự án Firebase của bạn. Bạn có thể tìm ID ứng dụng khách Google của dự án trong trang Thông tin đăng nhập bảng điều khiển dành cho nhà phát triển dự án của bạn
Trong cuộc gọi lại kết quả đăng nhập, hãy trao đổi mã thông báo ID từ phản hồi xác thực của Google để lấy thông tin xác thực Firebase và sử dụng thông tin đó để xác thực với Firebase.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
5

Nâng cao. Xác thực với Firebase trong Node. js

Để xác thực với Firebase trong Nút. ứng dụng js

Đăng nhập người dùng bằng Tài khoản Google của họ và nhận mã thông báo Google ID của người dùng. Bạn có thể thực hiện điều này theo nhiều cách. Ví dụ
- Nếu ứng dụng của bạn có giao diện người dùng của trình duyệt, hãy sử dụng Đăng nhập bằng Google như được mô tả trong phần Xử lý quy trình đăng nhập theo cách thủ công. Nhận mã thông báo Google ID từ phản hồi xác thực.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
  6Sau đó, gửi mã thông báo này đến Nút của bạn. ứng dụng js
- Nếu ứng dụng của bạn chạy trên thiết bị có khả năng nhập liệu hạn chế, chẳng hạn như TV, thì bạn có thể sử dụng quy trình Đăng nhập bằng Google cho TV và thiết bị
Sau khi bạn nhận được mã thông báo ID Google của người dùng, hãy sử dụng nó để tạo đối tượng Thông tin xác thực và sau đó đăng nhập người dùng bằng thông tin đăng nhập
Phiên bản web 9
Tìm hiểu thêm về SDK mô-đun Web v9 có thể rung chuyển dạng cây và nâng cấp từ phiên bản 8.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
7
Phiên bản web 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
8

Xác thực bằng Firebase trong tiện ích mở rộng của Chrome

Nếu bạn đang xây dựng ứng dụng tiện ích mở rộng của Chrome, bạn phải thêm ID tiện ích mở rộng của Chrome

Mở dự án của bạn trong bảng điều khiển Firebase
Trong phần Xác thực, hãy mở trang Phương thức đăng nhập
Thêm một URI như sau vào danh sách Miền được ủy quyền.
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
9

Chỉ các thao tác bật lên (

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js

4 và

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js

5) mới khả dụng đối với tiện ích mở rộng của Chrome vì tiện ích mở rộng của Chrome không thể sử dụng chuyển hướng HTTP. Bạn nên gọi các phương thức này từ tập lệnh trang nền thay vì cửa sổ bật lên hành động của trình duyệt, vì cửa sổ bật lên xác thực sẽ hủy cửa sổ bật lên hành động của trình duyệt. Các phương thức bật lên chỉ có thể được sử dụng trong các tiện ích mở rộng bằng Manifest V2. Manifest V3 mới hơn chỉ cho phép các tập lệnh nền ở dạng công nhân dịch vụ, hoàn toàn không thể thực hiện các thao tác bật lên

Trong tệp kê khai của tiện ích mở rộng Chrome của bạn, hãy đảm bảo rằng bạn thêm URL

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js

6 vào danh sách cho phép của

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js

Tùy chỉnh tên miền chuyển hướng cho đăng nhập Google

Khi tạo dự án, Firebase sẽ cung cấp một miền phụ duy nhất cho dự án của bạn.

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js

Điều này cũng sẽ được sử dụng làm cơ chế chuyển hướng để đăng nhập OAuth. Miền đó sẽ cần được cho phép đối với tất cả các nhà cung cấp OAuth được hỗ trợ. Tuy nhiên, điều này có nghĩa là người dùng có thể thấy miền đó khi đăng nhập vào Google trước khi chuyển hướng trở lại ứng dụng. Tiếp tục. https. // ứng dụng của tôi-12345. firebaseapp. com

Để tránh hiển thị miền phụ của bạn, bạn có thể thiết lập miền tùy chỉnh với Dịch vụ lưu trữ Firebase

Thực hiện theo các bước từ 1 đến 3 trong Thiết lập miền của bạn cho Dịch vụ lưu trữ. Khi bạn xác minh quyền sở hữu miền của mình, Dịch vụ lưu trữ cung cấp chứng chỉ SSL cho miền tùy chỉnh của bạn
Thêm miền tùy chỉnh của bạn vào danh sách miền được ủy quyền trong bảng điều khiển Firebase.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
9
Trong bảng điều khiển dành cho nhà phát triển của Google hoặc trang thiết lập OAuth, hãy đưa URL của trang chuyển hướng vào danh sách trắng, trang này sẽ có thể truy cập được trên miền tùy chỉnh của bạn.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js
```
0

Khi bạn khởi tạo thư viện JavaScript, hãy chỉ định miền tùy chỉnh của bạn với trường

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

Bước tiếp theo

Sau khi người dùng đăng nhập lần đầu tiên, tài khoản người dùng mới được tạo và liên kết với thông tin đăng nhập—nghĩa là tên người dùng và mật khẩu, số điện thoại hoặc thông tin nhà cung cấp xác thực—người dùng đã đăng nhập bằng. Tài khoản mới này được lưu trữ như một phần của dự án Firebase của bạn và có thể được sử dụng để xác định người dùng trên mọi ứng dụng trong dự án của bạn, bất kể người dùng đăng nhập như thế nào

Trong các ứng dụng của bạn, cách được đề xuất để biết trạng thái xác thực của người dùng là đặt một người quan sát trên đối tượng

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js

2. Sau đó, bạn có thể lấy thông tin hồ sơ cơ bản của người dùng từ đối tượng

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js

3. Xem Quản lý người dùng

Trong Cơ sở dữ liệu thời gian thực Firebase và Quy tắc bảo mật lưu trữ đám mây, bạn có thể lấy ID người dùng duy nhất của người dùng đã đăng nhập từ biến
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js
```
4 và sử dụng nó để kiểm soát dữ liệu mà người dùng có thể truy cập

Bạn có thể cho phép người dùng đăng nhập vào ứng dụng của mình bằng nhiều nhà cung cấp xác thực bằng cách liên kết thông tin đăng nhập của nhà cung cấp xác thực với tài khoản người dùng hiện có

programming javascript

Nút đăng xuất javascript

Trước khi bắt đầu

Xử lý luồng đăng nhập bằng SDK Firebase

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Phiên bản web 9

Phiên bản web 8

Xử lý lỗi tài khoản tồn tại với thông tin xác thực khác nhau

Chế độ bật lên

chế độ chuyển hướng

Nâng cao. Xử lý quy trình đăng nhập theo cách thủ công

Nâng cao. Xác thực với Firebase trong Node. js

Phiên bản web 9

Phiên bản web 8

Xác thực bằng Firebase trong tiện ích mở rộng của Chrome

Tùy chỉnh tên miền chuyển hướng cho đăng nhập Google

Bước tiếp theo

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội