web-dev-qa-db-ja.com

Typescriptを使用してAngular 2でGoogleにサインインを実装する方法

別のログインコンポーネントでangular 2にGoogleでのサインインを実装しようとしています。 Googleで利用可能なドキュメントで実装できません https://developers.google.com/identity/sign-in/web/sign-in

Index.htmlファイル内でスクリプトタグとgoogleコールバック関数を宣言すると、Googleサインインは機能します。ただし、ユーザーに受信したアクセストークンをさらに処理するために、Googleボタンでサインインをレンダリングし、コールバックを受信できるようにするために、別のコンポーネントが必要です。

angulartypescriptgoogle-signin
35
faris yousuf

この行をアプリに追加しますindex.htmlファイル

INDEX.html

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

Component.tsファイル

declare const gapi: any;
  public auth2: any;
  public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        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));
      });
  }

ngAfterViewInit(){
      this.googleInit();
}

テンプレートHTMLファイル

<button id="googleBtn">Google</button>

Plunker のデモを見る

62
Pravesh Khatana

src/index.html

アプリのindex.htmlファイルで、<head>セクションにこれを追加する必要があります。

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

typings/browser/ambient/gapi /

タイピングに gapi ＆ gapi.auth2 を追加する必要があります。

npm install --save @types/gapi.auth2
npm install --save @types/gapi

（これをもっとよく理解するには borysn の question をご覧ください）。

src/app/+ login/login.component.ts

これは私のコンポーネントのファイルです。ここでは、ngAfterViewInit()を使用してgapiを使用し、認証を取得する必要があります。そして、あなたはここで実装に従うことができます developers.google ... sign-in/web/build-button

例として、これは私のテンプレートです：

<div id="my-signin2"></div>

そしてサインイン機能：

ngAfterViewInit() {
    gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'light',
        'onsuccess': param => this.onSignIn(param)
    });
}

public onSignIn(googleUser) {
    var user : User = new User();

    ((u, p) => {
        u.id            = p.getId();
        u.name          = p.getName();
        u.email         = p.getEmail();
        u.imageUrl      = p.getImageUrl();
        u.givenName     = p.getGivenName();
        u.familyName    = p.getFamilyName();
    })(user, googleUser.getBasicProfile());

    ((u, r) => {
        u.token         = r.id_token;
    })(user, googleUser.getAuthResponse());

    user.save();
    this.goHome();
};

UPDATE：しばらくして、コメントを考慮して、この回答には小さな更新が必要でした。

16
Gatsbimantico

矢印（=>）関数を使用した字句スコープは、let that = this;の使用を不要にします。

Praveshの例のcleanerバージョン、thatスコーピング回避策の必要なしは、次のようになります。

Index.html

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

Component.ts

declare const gapi: any;

@Component({
  selector: 'google-signin',
  template: '<button id="googleBtn">Google Sign-In</button>'
})
export class GoogleSigninComponent implements AfterViewInit {

  private clientId:string = 'YOUR_CLIENT_ID.apps.googleusercontent.com';

  private scope = [
    'profile',
    'email',
    'https://www.googleapis.com/auth/plus.me',
    'https://www.googleapis.com/auth/contacts.readonly',
    'https://www.googleapis.com/auth/admin.directory.user.readonly'
  ].join(' ');

  public auth2: any;

  public googleInit() {        
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: this.clientId,
        cookiepolicy: 'single_Host_Origin',
        scope: this.scope
      });
      this.attachSignin(this.element.nativeElement.firstChild);
    });
  }

  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
      (googleUser) => {
        let profile = googleUser.getBasicProfile();
        console.log('Token || ' + googleUser.getAuthResponse().id_token);
        console.log('ID: ' + profile.getId());
        // ...
      }, function (error) {
        console.log(JSON.stringify(error, undefined, 2));
      });
  }

  constructor(private element: ElementRef) {
    console.log('ElementRef: ', this.element);
  }

  ngAfterViewInit() {
    this.googleInit();
  }
}

テンプレート

<div id="googleBtn">Google</div>

Working Plnkr

15
Steve Gomez

Googleと接続する別の方法もあります。

index.htmlにこれらの行を追加します。

<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>

次に、コンポーネント（または必要に応じてサービス）に書き込むサンプルコードを示します。

import {Component} from "@angular/core";
declare const gapi : any;


@Component({ ... })
export class ComponentClass {
   constructor() {
      gapi.load('auth2', function () {
         gapi.auth2.init()
      });
   }

   googleLogin() {
      let googleAuth = gapi.auth2.getAuthInstance();
      googleAuth.then(() => {
         googleAuth.signIn({scope: 'profile email'}).then(googleUser => {
            console.log(googleUser.getBasicProfile());
         });
      });
   }
}
7
Mattew Eon

現時点では、angular最新バージョンが登場し、ほとんどがangular 4/5/6を使用しているため、ソーシャルでログインするためのこの簡単なソリューションを提供することを考えています。

Angular 4/5/6 Social Login

AppModuleで、SocialLoginModuleをインポートします

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";


let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("Facebook-App-Id")
  },
  {
    id: LinkedInLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("LinkedIn-client-Id", false, 'en_US')
  }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [...]
})
export class AppModule { }

コンポーネントで使用します

以下のモジュールをインポートすることにより

import { AuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";

完全なリファレンスについては、 Github

デモ の本当にシンプルなページがあります

7
abdulbarik

グーグル製のグーグルボタンが欲しいので、これのほとんどは私には役に立たなかった。 @mathhew eonのコードは機能しましたが、ボタンを使用していません。

だから私はウィンドウにグーグルのデータ成功関数を投げました、それは完璧に動作します！また、ユーザーが既にログインしている場合、googleLogin関数を自動的に呼び出すという利点もあります。

html

<div class="g-signin2" data-onsuccess="googleLogin" data-theme="dark"></div>

あなたのindex.htmlでこれを頭に入れてください：

<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email AND WHATEVER OTHER SCOPES YOU WANT">
<script src="https://apis.google.com/js/platform.js" async defer></script>

次に、ngOnInitで

ngOnInit() {
    (window as any).googleLogin = this.googleLogin
}
public googleLogin(userInfo) {
    console.log(userInfo)
}
2
Samuel Thompson

私が追加したことを除いて、以前の回答ではすべて同じです

var gapiの宣言：any;そうしないと、エラーが発生します。

src/index.html

アプリのindex.htmlファイルで、セクションにこれを追加する必要があります。

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

typings/browser/ambient/gapi /

入力にgapiとgapi.auth2を追加する必要があります。

npm install --save @types/gapi.auth2
npm install --save @types/gapi

（これをもう少しよく理解するには、このborysnの質問を参照してください）。

src/app/+ login/login.component.ts

これは私のコンポーネントのファイルです。ここでは、ngAfterViewInit（）を使用してgapiを使用し、認証を取得する必要があります。ここで実装を確認できますdeveloper.google ... sign-in/web/build-button

例として、これは私のテンプレートです：

<div id="my-signin2"></div>

そしてサインイン機能：

 declare var gapi: any;

ngAfterViewInit() {
   gapi.signin2.render('my-signin2', {
      'scope': 'profile email',
      'width': 240,
      'height': 50,
      'longtitle': true,
      'theme': 'light',
      'onsuccess': param => this.onSignIn(param)
  });
}

public onSignIn(googleUser) {
   var user : User = new User();

      ((u, p) => {
         u.id            = p.getId();
         u.name          = p.getName();
         u.email         = p.getEmail();
         u.imageUrl      = p.getImageUrl();
         u.givenName     = p.getGivenName();
         u.familyName    = p.getFamilyName();
      })(user, googleUser.getBasicProfile());

      ((u, r) => {
         u.token         = r.id_token;
      })(user, googleUser.getAuthResponse());

      user.save();
      this.goHome();
};
0
ankit gupta