如何在Angular应用程序中使用Google身份验证表单?

时间:2019-08-07 09:41:43

标签: angular typescript authentication google-oauth

我在Angular 6应用程序中使用“ Google登录JavaScript客户端”,我已经正确配置了Google需要工作的参数,但是实现方式如下:

  1. 在HTML中放置一个按钮
  2. 此按钮将打开一个PopUp(Google)
  3. 此PopUp返回验证结果。

我们将仅使用Google帐户来输入我们的应用程序,因此我不希望弹出窗口,我想放置一个可以出现在弹出窗口中的表单并将其放置在我的login.html中,如何是吗?

public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: 'THE CLIENT ID',
        cookiepolicy: 'single_host_origin',
        scope: 'profile email'
      });
      this.attachSignin(document.getElementById('googleBtn'));
    });
  }
  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
      (googleUser) => {
        let profile = googleUser.getBasicProfile();
        // console.log('Token || ' + googleUser.getAuthResponse().id_token);
        console.log('ID: ' + profile.getId());
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
        //YOUR CODE HERE


      }, (error) => {
        alert(JSON.stringify(error, undefined, 2));
      });
  }

/// In HTML I have
<button id="googleBtn">Google</button>
```strong text**

0 个答案:

没有答案