angularjs 谷歌oauth2获取id_token

lsmepo6l  于 2022-10-31  发布在  Angular
关注(0)|答案(3)|浏览(227)

我在客户端angularjs工作。我正在尝试实现谷歌的oauth2。我正在获得访问权限,但我需要得到id_token。
我添加了app.js、controller.js和html部分。
我按照这个教程:http://anandsekar.github.io/oauth2-with-angularjs/
app.js:

  1. angular
  2. .module('angularoauthexampleApp', [ ])
  3. .config(function ($routeProvider) {
  4. $routeProvider
  5. .when('/', {
  6. templateUrl: 'views/main.html',
  7. controller: 'MainCtrl'
  8. })
  9. .when('/access_token=:accessToken', {
  10. template: '',
  11. controller: function ($location,$rootScope) {
  12. var hash = $location.path().substr(1);
  13. var splitted = hash.split('&');
  14. var params = {};
  15. for (var i = 0; i < splitted.length; i++) {
  16. var param = splitted[i].split('=');
  17. var key = param[0];
  18. var value = param[1];
  19. params[key] = value;
  20. $rootScope.accesstoken=params;
  21. }
  22. $location.path("/about");
  23. }
  24. })
  25. .otherwise({
  26. redirectTo: '/'
  27. });
  28. });

controller.js

  1. angular.module('angularoauthexampleApp')
  2. .controller('MainCtrl', function ($scope) {
  3. $scope.login=function() {
  4. var client_id="your client_id";
  5. var scope="email";
  6. var redirect_uri="http://localhost:9000";
  7. var response_type="token";
  8. var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
  9. "&response_type="+response_type;
  10. window.location.replace(url);
  11. };
  12. });

HTML格式:

  1. <button class="btn btn-primary" ng-click="login()">Login</button>
qlckcl4x

qlckcl4x1#

您需要使用nonce。添加它,id_token将作为响应。
例如:

  1. let params = {
  2. 'client_id': GOOGLE_API_CLIEND_ID,
  3. 'redirect_uri': `${location.origin}/auth/google`,
  4. 'response_type': 'id_token token',
  5. 'scope': GOOGLE_API_SCOPES,
  6. 'state': 'af0ifjsldkj',
  7. 'nonce': 'n-0S6_WzA2Mj'
  8. };

对于 * 隐式流*Nonce,需要参数。有关详细信息,请查看http://openid.net/specs/openid-connect-core-1_0.html#ImplicitAuthRequest

cbeh67ev

cbeh67ev2#

要接收id_token,您需要将response_type参数更改为:

  1. var response_type="id_token";

作为响应,您将获得id_token。如果您同时需要id_tokenaccess_token,则应将“token”添加到response_type

  1. var response_type="token id_token";

要了解更多信息,请访问read OpenId article
此外,您还可以使用Google Ouath Playground测试身份验证流

fae0ux8s

fae0ux8s3#

要触发OpenID Connect流(OAuth 2.0的扩展),您需要在身份验证请求中添加“openid”作用域(并对两者之间的空格进行urlencode编码),因此:

  1. var scope="openid%20email";

相关问题