web-dev-qa-db-ja.com

AngularJS + OAuth

Angularアプリ、
これは、ユーザーがFacebok/Google/Twitter経由で接続できるようにするか、通常の方法で登録できるようにすることを意味します。
Angular-OAuth が有用であることがわかりましたが、Facebook（またはTwitter）では動作しないようです。

誰もがこの包括的なソリューションを知っていますか？

angularjsoauth
48
Asaf

oauth.io を見てください

  • Javascriptでの簡単な実装
  • 80+ OAuthプロバイダー
  • 高速で安全
40
Thibaud Arnault

angular jsでリダイレクトのみを使用する簡単な例を示します

認証にリダイレクトする方法は次のとおりです

angular.module('angularoauthexampleApp')
  .controller('MainCtrl', function ($scope) {
    $scope.login=function() {
        var client_id="your client id";
        var scope="email";
        var redirect_uri="http://localhost:9000";
        var response_type="token";
        var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
        "&response_type="+response_type;
        window.location.replace(url);
    };
  });

認証後にリダイレクトを処理する方法は次のとおりです

angular
  .module('angularoauthexampleApp', [
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/access_token=:accessToken', {
        template: '',
        controller: function ($location,$rootScope) {
          var hash = $location.path().substr(1);

          var splitted = hash.split('&');
          var params = {};

          for (var i = 0; i < splitted.length; i++) {
            var param  = splitted[i].split('=');
            var key    = param[0];
            var value  = param[1];
            params[key] = value;
            $rootScope.accesstoken=params;
          }
          $location.path("/about");
        }
      })
  });

詳細な情報はこちら http://anandsekar.github.io/oauth2-with-angularjs/

52
Anand Rajasekar

フリーミアムの代わりにフリーオープンソースがあります oauth.io ： hello.js

13
Pedro Montoto García

Githubの Satellizer プロジェクトをご覧ください。私はそれを始めたばかりで、有望なようです。

JSON Web Tokensを使用し、email + password、Facebook、Twitter、Google、およびその他のOAuth 1.0/2.0プロバイダー。

クライアント側のコードはそのまま使用できます。サーバー側を自分で実装する必要があります。多くのサーバー側言語のワークフローとコード例の適切な説明があります。

6
Sunil D.

コメントとサンプルを追加したかっただけですAngular上記の OAuth.io ソリューションのコード。創業者が述べたように、それは有料サービスですが、2つのメインがあります私が信じる利点：

  • これは、Facebook、Twitterなど、あらゆるOAuthプロバイダーに接続するための一貫した方法を提供します。つまり、各OAuth=プロバイダー実装のすべての特性を隠します。
  • フロントエンドコードのみを使用してOAuth=ソーシャルボタンを実装できます。

フロントエンドのコードもかなり単純です。これを coderwall から取得しました。

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 {

  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) {
    // Prevents page reload
    e.preventDefault();

    // Initializes OAuth.io with API key
    // Sign-up an account to get one
    _window().OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');

    // Popup Github and ask for authorization
    _window().OAuth.popup('github').then((provider) => {

      // Prompts 'welcome' message with User's name on successful login
      // Check console logs for additional User info
      provider.me().then((data) => {
        console.log('data: ', data);
        alert('Welcome ' + data.name + '!');
      });

      // You can also call Github's API using .get()
      provider.get('/user').then((data) => {
        console.log('self data:', data);
      });
    });
  }
}
0
nethsix