AngularJS + OAuth

Posted 2023-02-27

【中文标题】AngularJS + OAuth

【英文标题】：

【发布时间】：2013-08-15 14:41:42

【问题描述】：

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

有谁知道这方面的包罗万象的解决方案？

【参考方案1】：

这是一个使用 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/

【讨论】：

为什么这不是选择的答案？

我同意，这是最完整的答案

应用程序的不同部分如何获得该用户的授权？

在浏览器接收到来自 OAuth 服务器的重定向时，这不会导致您的 Angular 应用程序的全新实例被引导吗？

【参考方案2】：

看看oauth.io

用 javascript 轻松实现 80 多个 OAuth 提供商 快速且安全

【讨论】：

这仍然是 Angular 应用的最佳解决方案吗？

OAuth.io 有一个大型的免费增值模式（每月最多 1000 名用户）和一个开源版本在 Github 上可用：github.com/oauth-io/oauthd

关于如何使用 Oauth.io 调用 twitter 授权而不是 autenticate 的任何想法？

@clopez dev.twitter.com/docs/auth/implementing-sign-twitter。但是你不能只使用 angular-js 来做到这一点，你需要有一个后端，因为它需要通过 HTTP 发送你的 API 密钥（使用密钥）、签名和其他必须保密的 OAuth 参数。跨度>

正如我之前所说，当然，这项服务并不是完全免费的，公司需要钱才能继续前进。但是，我们开发了完全免费的开源版本 oauthd (github.com/oauth-io/oauthd)，核心与 oauth.io 完全相同。 oauth.io 背后的理念是以开源许可证发布所有内容，所以如果你有服务器，它是免费的。

【参考方案3】：

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

【讨论】：

OAuth.io 也是开源的，他的 OAuth 守护进程：github.com/oauth-io/oauthd ;)

但这只是OAuth提供者（服务器），不是我认为的js客户端。

所有客户端都在 github 上可用：js、ios、android、phonegap、flex、php、node.js 以及更多即将推出）。您可以将它们配置为使用 oauthd 而不是 oauth.io

btw oauthd 不是 OAuth 提供者，而是 OAuth.io 团队在开源中制作的 OAuth.io 的克隆（核心 - API 密钥管理器/OAuth 流程/代理 OAuth1 的 API 调用/用户统一等...）。

【参考方案4】：

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

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

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

【参考方案5】：

只是想为上面提到的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);
      );
    );