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

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

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

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

<img width="400" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139323636382f62363638363061332d343830612d643836392d653337612d6133373837626230636466382e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/193b9dbf-86ee-0c8f-c180-e1ffb186d3e2.png">

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

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

導入までの Steps

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

###Step1. Angular app 作成

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

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

Angular-CLIをダウンロード

最新のAngular-CLIをダウンロードします。Angular-CLIについては[こちら](https://angular.jp/guide/quickstart)をご覧ください。

```
$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 に下記のコードを追記して下さい。

```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 に置き換えて下さい。

```js: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を下記のように追記:

```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'をクリック

<img width="798" alt="github_register_new_app.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/8e755d7f-e911-dc48-0ac4-26f7036ed1b4.png">


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

* 表示されている 'Client ID','Client Secret'をメモします。( 'Settings' -> 'Developer Settings' -> 'OAuth App's )
<img width="808" alt="github_credentials.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/d302cc10-d26d-c945-0206-ae0a7a308a8c.png">


###Step5. OAuth.io のアカウントを作成し、API key を取得
* これからのステップを動画で確認

![OAuth_gif.gif](https://qiita-image-store.s3.amazonaws.com/0/192668/51388acb-7b32-9678-1b4f-7620ffe45b77.gif)


* OAuth.io のアカウント作成 [https://oauth.io/signup](https://oauth.io/signup?utm_source=qiita&utm_campaign=UseAngularjs&utm_medium=article)
 
<img width="634" alt="oauthio_signup.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/01eaa14f-8713-b5f7-0aee-3e9d6d5a3bd8.png">

* サインアップ後、メインダッシュボードが表示されます。
* Appkey の Public Key を Step3. app.component.ts の'YOUR_OAUTH_API_KEY'に記入する
<img width="1436" alt="oauthio_your_apikye.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/a099399e-66cb-c8a5-a927-0f8543eacc76.png">

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

<img width="1344" alt="oauthio_general.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/556fe865-78d9-da30-264a-198d0d4ebeea.png">

* Integrated APIsの画面右側に表示される'+Add APIs'をクリック
<img width="1350" alt="oauthio_api_integration.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/668ddaa0-ecfe-57b8-ae41-8df9e53a3e8a.png">

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

* 'Github'をクリック
<img width="594" alt="oauthio_provider_list.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/da5a6759-7f75-f876-63e7-bf4dbf058534.png">

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

<img width="1431" alt="oauth_link_to_github.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/d721fd0a-5cc3-adfe-cbfb-45513604f982.png">

* 'Try Auth'ボタンをクリック
<img width="1431" alt="oauthio_github_tryauth.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/a1a4e695-b92c-0731-e116-12d977eb4c52.png">

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

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

<img width="408" alt="github_autorize.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/b22f4999-6a13-ec9c-3753-891ebdb0cf8a.png">


Github との連携が成功すると、下記ポップアップが表示されます。
　a. OAuth.ioの API Key が発行されます; この Key により、OAuth.io で設定したすべての連携先にアクセスできます
　b. コードスニペットをコピーし、”Github を使って登録”ボタンを設置したい場所にペーストします。
　c. Giuhub からのレスポンスが確認できます。
　d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。
<img width="423" alt="oauthio_github_success.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/12a0b3f7-b296-69f7-c021-c5ef073efb41.png">


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



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

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