Angular 2 中的 Google 身份验证注销问题答案

【问题标题】：Google auth logout issue in angular 2Angular 2 中的 Google 身份验证注销问题
【发布时间】：2018-01-15 21:51:34
【问题描述】：

我是 Angular js 的新手。我正在开发一个版本 2 的 Angular 项目。我已经按照https://www.npmjs.com/package/angular2-social-login 使用angular2-social-login 实现了google auth login。谷歌登录工作正常，但是当我点击登录按钮退出后，我仍然得到以前登录的用户详细信息，并且没有显示谷歌身份验证登录页面。这是我的实现细节。

安装通过 npm

npm install angular2-social-login --save

将 angular2-social-login 添加到您的项目中在您的 systemjs.config 中添加 angular2-social-login 的地图

'angular2-social-login': 'node_modules/angular2-social-login/dist/bundles/angular2-social-login.min.js'

主模块配置

import { NgModule }      from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2SocialLoginModule } from "angular2-social-login";

let providers = {
    "google": {
      "clientId": "GOOGLE_CLIENT_ID"
    },
    "linkedin": {
      "clientId": "LINKEDIN_CLIENT_ID"
    },
    "facebook": {
      "clientId": "FACEBOOK_CLIENT_ID",
      "apiVersion": "<version>" //like v2.4 
    }
  };

@NgModule({
  imports: [ 
              BrowserModule,
              Angular2SocialLoginModule
          ],
  declarations: [AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { 
  constructor(){}
}
Angular2SocialLoginModule.loadProvidersScripts(providers);

...
import { AuthService } from "angular2-social-login";
...
@Component({
    ...
})
export class AppComponent implements OnDestroy {
  ...
  constructor(public _auth: AuthService){ }

  signIn(provider){
    this.sub = this._auth.login(provider).subscribe(
      (data) => {
                  console.log(data);
                  //user data 
                  //name, image, uid, provider, uid, email, token (accessToken for Facebook & google, no token for linkedIn), idToken(only for google) 
                }
    )
  }

  logout(){
    this._auth.logout().subscribe(
      (data)=>{//return a boolean value.} 
    )
  }

  ...

}

提前谢谢。

【问题讨论】：

完成登录后做一个unsubscribe
你能澄清一下
this.sub.unsubscribe 因为它得到了一个 observable
不幸的是它对我不起作用。
试试这个示例代码 - github.com/abacritt/angular4-social-login/blob/master/README.md

标签： angular

【解决方案1】：

我正在使用 Angular 6，这是我用于注销 google 帐户的代码：

在我的 TS 文件中，声明一个变量 auth2、一个变量 gapi 和一个函数 googleLogout：

declare const gapi: any;//this line should be at the very top of your TS file
public auth2: any;
 public googleLogout() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.getAuthInstance();
      this.auth2.signOut().then(function() {
        console.log("User signed out");
      });
      //this.attachSignout(document.getElementById('googleBtn2'));
    });
  }

然后，在 html 文件中，给一个元素并绑定一个点击函数：

<div id="googleBtn2" (click)="googleLogout()">Google SignOut</div>

别忘了在 index.html 中包含 google api：

  <script src="https://apis.google.com/js/platform.js" async defer></script>

【讨论】：