ajax – Polymer.js OAuth2

2023年8月9日 285次阅读

是否有一个例子描述了如何在前端基于Polymer.js实现OAuth2身份验证？

我刚刚找到了一些描述AJAX过程的例子,它也是Polymer元素集的一部分.那么如何继续前进？

最佳答案 我发现这里有一个
git repo,它有演示.所以你可以看看.

  <oauth-user></oauth-user>

  <polymer-element name="oauth-user">
    <template>
        <oauth-authenticator id="authenticator" client_id="282331888208-06mufq54k942624lv803nlm6kvlq76fr.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/userinfo.profile" on-authenticated="{{authenticated}}"></oauth-authenticator>
        <core-ajax auto id="ajax" url="{{url}}" headers="{{headers}}" handleAs="json" on-core-response="{{ajaxResponse}}"></core-ajax>
        <p>{{greeting}}</p>
    </template>
    <script>
        Polymer({
            url: '',
            greeting: '...',

            authenticated: function(event){
              var token = event.detail.token;
              this.headers = {'Authorization': 'Bearer ' + token};
              this.url = "https://www.googleapis.com/oauth2/v1/userinfo?alt=json";
            },

            ajaxResponse: function(event, response) {
              this.greeting = 'Hello ' + response.response.name + '!';
            }
        });
    </script>
  </polymer-element>

您可以看到有事件处理程序,因此您可以重定向用户或更新屏幕.还有一个获取用户信息的网址.

点赞