Проблема с реализацией входа в Google с использованием JavaScript в веб-приложении - PullRequest
Новая
       83

Проблема с реализацией входа в Google с использованием JavaScript в веб-приложении

0 голосов
/ 20 июня 2020

Пытаюсь реализовать Google логин в моем веб-приложении только с HTML и JavaScript. Я создал учетные данные своего веб-приложения (ключ API и клиент идентификатора OAuth 2.0).

Это мои файлы HTML и JavaScript

логин. html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-signin-client_id" content="505107797118-r6a43s04rsn3qjt02dvau3q3otti8i6m.apps.googleusercontent.com">
    <title>Test_Login_Google</title>
</head>
<body>
    <button type="button" id="Login_Google">
    <img src="https://Google_pretty_Logo.svg.png" alt="logo_google">
        Login_with_Google
    </button>
    <button id="Information_profile_Google" >
        Get_profile_information
    </button>
    <button id="logout_google" >
        Close my login Google
    </button>
    <script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
    <script src="scripts.js"></script>

скрипты. js

const login = document.getElementById('Login_Google')
const getinformation = document.getElementById('Information_profile_Google')
const logout = document.getElementById('Logout_Google')

/* This function runs when the google script load  */
function init() {
    gapi.load('auth2', function () {
        /* Ready. Make a call to gapi.auth2.init or some other API */
        console.log('Ya se pueden hacer llamads al gapi.auth2')
    });

    login.addEventListener('click', () => {
        gapi.auth2.authorize({
            client_id: '505107797118-r6a43s04rsn3qjt02dvau3q3otti8i6m.apps.googleusercontent.com',
            scope: 'email profile openid',
            response_type: 'id_token permission'
        }, function (response) {
            if (response.error) {
                console.log('Was a mistake with Google Login!')
                return;
            } else {
                console.log(response)
                // The user authorized the application for the scopes requested.
                var accessToken = response.access_token;
                var idToken = response.id_token;
                console.log(accessToken)
                console.log(idToken)
                console.log('')
            }
        });
        gapi.auth2.init({
            client_id: '505107797118-r6a43s04rsn3qjt02dvau3q3otti8i6m.apps.googleusercontent.com',
            scope: 'email profile openid'
        }).then(
            (response) => {
                console.log(response)
            }, console.log('Api google initialized'));
    })

    getinformation.addEventListener('click', () => {
        var auth2 = gapi.auth2.getAuthInstance();
        console.log('This is the auth2')
        console.log(auth2)
        let user = auth2.currentUser.get()
        console.log(user)
        console.log('The Google user is: ' + user.Rt.Bd)
        console.log('The token wil be: ' + user.wc.id_token)
    })

    logout.addEventListener('click', () => {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
                console.log('The logout was successful');
            }
        );
    })
}

Итак, я понимаю, что методы входа в систему через API Google имеют следующий порядок:

  1. Запустите скрипт с src = https://apis.google.com/js/platform.js

  2. gapi.load()

gapi.auth2.authorize({client_id: 'CLIENT_ID.apps.googleusercontent.com',
    scope: 'email profile openid',
    response_type: 'id_token permission'})

gapi.auth2.init({
    client_id: 'CLIENT_ID.apps.googleusercontent.com',
    scope: 'email profile openid'})
gapi.auth2.getAuthInstance()

Моя проблема в том, что когда я пытаюсь получить информацию о пользователе, нажимая кнопку «получить информацию», auth2.currentUser.get() имеет значение NULL. Не знаю, почему это так.

...