47

我正在尝试为我的 Angular 应用程序编写登录解决方案，
这意味着允许用户通过 Facebook/Google/Twitter 连接或正常注册。
我发现Angular-OAuth很有用，但它似乎不适用于 Facebook（或 Twitter）。

任何人都知道一个包罗万象的解决方案吗？

4

5 回答 5

54

这是一个简单的示例，仅使用带有角度 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/

于 2014-09-25T05:14:24.383 回答
40

看看oauth.io

  • 用 Javascript 轻松实现
  • 80 多个 OAuth 提供商
  • 快速安全
于 2013-09-03T02:27:30.597 回答
13

有一个免费的开源替代免费增值oauth.io：hello.js

于 2014-05-06T08:51:42.227 回答
6

看看 Github 上的Satellizer项目。我刚刚开始使用它，它似乎很有希望。

它使用 JSON Web 令牌，并允许使用以下方式登录：电子邮件+密码、Facebook、Twitter、Google 和任何其他 OAuth 1.0/2.0 提供商。

客户端代码开箱即用，您必须自己实现服务器端。许多服务器端语言的工作流程和代码示例都有很好的描述。

于 2015-07-02T23:08:45.437 回答
0

只是想为上面提到的OAuth.io解决方案添加一些评论和示例 Angular 代码。正如创始人所说，这是一项付费服务​​，但我相信它有两个主要好处：

  • 它提供了一种连接到任何 OAuth 提供者的一致方式，无论是 Facebook、Twitter 等，也就是说，它隐藏了每个 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);
      });
    });
  }
}
于 2018-12-24T02:52:31.763 回答