Angular.js を使ってソーシャルログインボタンを作成

Angular.js を使ってソーシャルログインボタンを作成:

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

5分もかからず、簡単にソーシャルログインボタン( facebook, Twitter, Insagram, Line, Google など)を Angular.js を使用して導入！

この記事では、Angular.js と 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 アップロードするなど)を選択すると、必要なコードを表示します。コードをコピーするだけで利用できます。