Đăng nhập bằng Google với javascript

Đăng nhập bằng Google với javascript

Bước 1: tạo 1 project trên gooogle

Vào liên kết: https://console.cloud.google.com/projectcreate

Tạo dự án mới


Vào mục: APIs and services  -> OAutho consent screen

Vào tìm mục Configure Consent Screen -> External (cho người ngoài sử dụng)

Cấp quyền cho lấy thông tin email.
 .../auth/userinfo.email
 .../auth/userinfo.profile

Sau đó public app

Bước 2: vào lại APIs and services  -> Credentials

Tạo 1 Create OAuth client ID
 Type là App Webaplication
  Authorised redirect URLs: sau khi đăng nhập thành công
  Sau bước tạo Create OAuth bạn cần có thông tin:
  Client ID: là 1 chuổi có dạng xxxx-xxxxxx.apps.googleusercontent.com

Bước 3: User Oauth 2.0

  Nếu bạn làm bằng javascript hãy tìm ra link dưới (Bạn nên tham khảo trược tiếp nhà phát triển google vì api có thể cập nhật theo thời gian)

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=vi

Bước 4: Tạo ra 1 trang HTML

Đưa đoạn lệnh sau vào


  var CLIENT_ID="603591966546-u9599alur4m8oojsrdt2voarhclm5os4.apps.googleusercontent.com";
function oauthSignIn() {
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
  var form = document.createElement('form');
  form.setAttribute('method', 'GET');
  form.setAttribute('action', oauth2Endpoint);
  var params = {'client_id': CLIENT_ID,
                'redirect_uri': 'https://iif.vn',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }
  document.body.appendChild(form);
  form.submit();
}
const getToken= () =>{
  searchParams = new URLSearchParams(window.location.search);
  tk=  searchParams.get("access_token");
  return tk;
}
//alert("chao ${getToken}");
const getUserInfor= async() =>
{
    const tk =  getToken();
    if(tk!=null)
    {
        //url="https://www.googleapis.com/oauth2/v3/tokeninfo?access_token="+tk
        url="https://www.googleapis.com/oauth2/v3/userinfo?access_token="+tk
        alert(url);
        const respone = await fetch(url);
        //alert(respone);
        const data = await respone.json();
        alert(data.email);
        alert(data.picture);
    }
}
getUserInfor();

Giải thích: Lấy thông tin email hình đại diện qua googlo api

tìm: get user info from access token google

Cấu trúc api google trả về json (chạy url có chứa token)

{
  "sub": "11112222333",
  "name": "PhanMemInHoaDon .COM",
  "given_name": "PhanMemInHoaDon",
  "family_name": ".COM",
  "picture": "https://lh3.googleusercontent.com/a/ACg8ocKnTnFeg8feVIkQE9zvjUrs3lZbzaEDPX3f4LFDD67rfTg34Q\u003ds96-c",
  "email": "phanmeminhoadon.com@gmail.com",
  "email_verified": true
}



 

 

Bài viết liên quan:

Đăng nhập bằng Google với javascript