AngularJS を使って'Github'ソーシャルログインボタンを実装！

#ゼロからソーシャルログインボタンを簡単に AngularJS で導入する方法

5分もかからず、簡単にソーシャルログインボタン( facebook, Twitter, Insagram, Line, Google など)を AngularJS を使用して導入！
この記事では、AngularJS と OAuth 認証サービスの OAuth.io を使用します。
OAuth.ioは、１７０以上の OAuth プロバイダーの特徴を把握し、API の仕様変更しても、すぐに対応しています。
ドキュメントと SDK も JavaScript, NodeJS, PHP, iOS, Android 向けに用意されています。

今回の記事では、'Github' を例として説明します。

上記のボタンをあなたのサービスのログインページに導入する事により、
ユーザーネームとパスワードのログインの他に Github アカウントでのログインを追加する事が出来ます。
今では多くのサービスが、このようなSNSアカウントによるログインを導入しています。

こちらからボタン動作を確認できます。
https://jsfiddle.net/27zxjbs3/

導入までの Steps

1. Angular app 作成
2. 必要な外部ソースを Angular app に取得
3. OAuth.io を Angular app に追加
4. Github app を作成
5. OAuth.io のアカウントを作成
6. OAuth.io アカウントとリンクさせる

###Step1. Angular app 作成

最初にベースとなる、シングルページの Angular appを作成します。

！注意！　 Node.js と npm を先にインストールして下さい。

Angular-CLIをダウンロード

最新のAngular-CLIをダウンロードします。Angular-CLIについてはこちらをご覧ください。

$npm install -g @angular/cli

• Angular-CLIを使用して、必要なコンポーネーントを作成します。

Angular-CLI

$ng new github-login-demo
$cd github-login-demo

###Step2. 外部ソースを Angular app に追加

'Github login button'をデザインするために、bootstrap を使用します。

• 外部ソースを読み込むために、app.component.html に下記のコードを追記して下さい。

app.component.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

###Step3. Angular app にOAuth.io を導入する

• app.component.ts,app.component.html に下記のコードを記述して、'Sign in with Github' ボタンを表示させる。
• 'YOUR_OAUTH_API_KEY'をStep５. OAuth.io アカウント作成時に表示される APIkey に置き換えて下さい。

app.component.ts

import {Component, OnInit} from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  // oauth.jsをCDNからダウンロードする。（外部のスクリプトを追加するのと同じように出来ます。）
  ngOnInit(): void {
    const oauthScript = document.createElement('script');
    oauthScript.src = 'https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js';

    document.body.appendChild(oauthScript);
  }

  handleClick(e) {
    // ページのリロードを防止する。
    e.preventDefault();

    // API keyを使ってOAuth.ioを初期化する。
    // OAuth.io登録後にメモした、あなたのAPIkeyを'YOUR_OAUTH_API_KEY'に記入します。
    _window().OAuth.initialize('YOUR_OAUTH_API_KEY');

    // ポップアップウインドウを表示し、Githubの承認する。
    _window().OAuth.popup('github').then((provider) => {

      // 'welcome'メッセージをユーザの名前と一緒に表示する。
      // 取得したユーザーのデータをコンソールで確認する。
      provider.me().then((data) => {
        console.log('data: ', data);
        alert('Welcome ' + data.name + '!');
      });

      // また、.get()にてGithub's APIから取得も出来ます。
      provider.get('/user').then((data) => {
        console.log('self data:', data);
      });
    });
  }
}

• app.component.htmlを下記のように追記:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<a href="" (click)="handleClick($event)" class="btn btn-primary">Sign in with Github</a>

まだ、OAuth.ioはnpmJSに対応していない為、componentDidMount()functionを使用してCDNファイルを読み込んでいます。

• プログラムを実行しましょう。これだけで、あなたの Angular アプリに Github ログインを実装できました。

$npm start

###Step4. Github app を作成し、OAuth.io アカウントとリンクさせる

• こちらから、簡単にGithubデベロッパー用のOAuth appが作成出来ます。
  'https://github.com/settings/applications/new'
• Authorization callback URLには、'http://oauth.io/auth' と記入して下さい。
• 全て記入したら'Register Application'をクリック

アプリが無事登録されました。

• 表示されている 'Client ID','Client Secret'をメモします。( 'Settings' -> 'Developer Settings' -> 'OAuth App's )

###Step5. OAuth.io のアカウントを作成し、API key を取得

• これからのステップを動画で確認

• OAuth.io のアカウント作成 https://oauth.io/signup

• サインアップ後、メインダッシュボードが表示されます。
• Appkey の Public Key を Step3. app.component.ts の'YOUR_OAUTH_API_KEY'に記入する

• 画面左側の”Integrated APIs ”をクリック

• Integrated APIsの画面右側に表示される'+Add APIs'をクリック

'Add a provider to your app'利用可能なサービスが表示されます。

• 'Github'をクリック

• Github でメモした、'Client ID','Client Secret'を'client_id','client_secret'それぞれへ記入します。
• 'scope'には'user'と記入します。
• 記入し終わったら”Save changes”をクリック

• 'Try Auth'ボタンをクリック

Githubの認証画面に飛びます。

• 'Authorize'をクリックして、許可を与えます。

Github との連携が成功すると、下記ポップアップが表示されます。
　a. OAuth.ioの API Key が発行されます; この Key により、OAuth.io で設定したすべての連携先にアクセスできます
　b. コードスニペットをコピーし、”Github を使って登録”ボタンを設置したい場所にペーストします。
　c. Giuhub からのレスポンスが確認できます。
　d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。

たったこれだけで、Github ログインボタンをあなたのサービスに導入できました。

今回の記事はフロントエンド部分だけの説明でした。今のままでは、バックエンドはフロントエンドが何をしているのかわかりません。なので、バックエンドのコントローラーにコードを追加しなければなりません。こちらから(SDK)のドキュメントを確認できます。

OAuth.io を利用して出来る事は、こちらから確認できます。
tome.oauth.io では、OAuth プロバイダーとやりたい事(Facebookへ投稿、Dropbox からファイルをダウンロード or アップロードするなど)を選択すると、必要なコードを表示します。コードをコピーするだけで利用できます。