LoginSignup
1
2

More than 5 years have passed since last update.

@RingCaptcha

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

Last updated at Posted at 2018-12-26

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

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139323636382f62363638363061332d343830612d643836392d653337612d6133373837626230636466382e706e67.png

上記のボタンをあなたのサービスのログインページに導入する事により、
ユーザーネームとパスワードのログインの他に 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_register_new_app.png

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

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

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

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

OAuth_gif.gif

oauthio_signup.png

  • サインアップ後、メインダッシュボードが表示されます。

  • Appkey の Public Key を Step3. app.component.ts の'YOUR_OAUTH_API_KEY'に記入する
    oauthio_your_apikye.png

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

oauthio_general.png

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

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

  • 'Github'をクリック
    oauthio_provider_list.png

  • Github でメモした、'Client ID','Client Secret'を'client_id','client_secret'それぞれへ記入します。

  • 'scope'には'user'と記入します。

  • 記入し終わったら”Save changes”をクリック

oauth_link_to_github.png

  • 'Try Auth'ボタンをクリック oauthio_github_tryauth.png

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

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

github_autorize.png

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

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

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

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2