angular-oauth2-oidc.cognito

Support for OAuth 2 and OpenId Connect (OIDC) in Angular.

angular-oauth2-oidc

Support for OAuth 2 and OpenId Connect (OIDC) in Angular.

Credits

Resources

Tested Environment

Successfully tested with the Angular 2 and 4 and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. At server side we've used IdentityServer (.NET/ .NET Core) and Redhat's Keycloak (Java).

New Features in Version 2

  • Token Refresh for Implicit Flow by implementing "silent refresh"
  • Validating the signature of the received id_token
  • Providing Events via the observable events.
  • The event token_expires can be used togehter with a silent refresh to automatically refresh a token when/ before it expires (see also property timeoutFactor).

Additional Features

  • Logging in via OAuth2 and OpenId Connect (OIDC) Implicit Flow (where user is redirected to Identity Provider)
  • "Logging in" via Password Flow (where user enters his/her password into the client)
  • Token Refresh for Password Flow by using a Refresh Token
  • Automatically refreshing a token when/ some time before it expires
  • Querying Userinfo Endpoint
  • Querying Discovery Document to ease configuration
  • Validating claims of the id_token regarding the specs
  • Hook for further custom validations
  • Single-Sign-Out by redirecting to the auth-server's logout-endpoint

Breaking Changes in Version 2

  • The property oidc defaults to true.
  • If you are just using oauth2, you have to set oidc to false. Otherwise, the validation of the user profile will fail!
  • By default, sessionStorage is used. To use localStorage call method setStorage
  • Demands using https as OIDC and OAuth2 relay on it. This rule can be relaxed using the property requireHttps, e. g. for local testing.
  • Demands that every url provided by the discovery document starts with the issuer's url. This can be relaxed by using the property strictDiscoveryDocumentValidation.

Sample-Auth-Server

You can use the OIDC-Sample-Server mentioned in the samples for Testing. It assumes, that your Web-App runns on http://localhost:8080.

Username/Password: max/geheim

clientIds:

  • spa-demo (implicit flow)
  • demo-resource-owner (resource owner password flow)

redirectUris:

  • localhost:[8080-8089|4200-4202]
  • localhost:[8080-8089|4200-4202]/index.html
  • localhost:[8080-8089|4200-4202]/silent-refresh.html

Setup Provider for OAuthService

------ - ----------- - ---- ----------------------
-----

-----------
  -------- - 
    -----
    -----------
    ---------------------
  --
  ------------- -
    -------------
    --------------
    -----
  --
  ---------- -
    ------------ 
  -
--
------ ----- --------- -
-

Using Implicit Flow

This section shows how to use the implicit flow, which is redirecting the user to the auth-server for the login.

Configure Library for Implicit Flow (using discovery document)

To configure the library you just have to set some properties on startup. For this, the following sample uses the constructor of the AppComponent which is called before routing kicks in.

------------ --- --
------ ----- ------------ -

  ------------------- ------------- ------------- -
        
        -- --- -- --- --- -- -------- --- ---- -- ----- -----
        ----------------------------- - ---------------------- - --------------

        -- --- ----- --- --- --- -- --------- ---- ---- -- -- --- -----------
        -------------------------- - -----------

        -- --- --- ----- --- --- ----------- --- ------ ------ -------
        -- --- ----- ----- --- ------- -- ----- --- --- -- - ---------------- ---
        ----------------------- - ------- ------- ----- ---------

        -- --- ---- -- --- ----------- ---- --- -- -- --------- ------ --- -----
        ------------------------ - ------------------------------------------------------------
        
        -- ---- --------- -------- --- ---- --- -- ----- --- ----
        ------------------------------------------------- -- -

            -- ---- ------ ---- ----- -- ----- --- -------- ------ --- --- ----
            -- --- ----------- --------- --- ---- ---- -- --- -------
            -- -- ------ ---- --- ---- --- --- ----- ----
            -----------------------------      

        ---

  -

-

Configure Library for Implicit Flow (without discovery document)

When you don't have a discovery document, you have to configure more properties manually:

------------ --- --
------ ----- ------------ -

  ------------------- ------------- ------------- -
        
        -- ---------
        -------------------------- - ------------------------------------------------------------------------------ --------------

        -- --- -- --- --- -- -------- --- ---- -- ----- -----
        ----------------------------- - ---------------------- - --------------

        -- --- ----- --- -------- --- ---- ---- -- -- --- -----------
        -------------------------- - -----------

        -- --- --- ----- --- --- ----------- --- ------ ------ -------
        ----------------------- - ------- ------- ----- ---------

        -- --- ---------- -- --- -------------- -- ------- -------------- -- --- ------- -------
        -- ------- -- ------------
        ---------------------------------------------

        -- -- ---- ------ --------------- --- --- --- --- ---- ------------- --------------- ----
        --------------------------- - -------------------------------------------------------------------------------

        -- ---- ------ ---- ----- -- ----- --- -------- ------ --- --- ----
        -- --- ----------- --------- --- ---- ---- -- --- -------
        -- -- ------ ---- --- ---- --- --- ----- ----
        -----------------------------      


  -

-

Home-Component (for login)

------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------------

------------
    ------------ --------------- 
--
------ ----- ------------- -
    
    ------------------- ------------- ------------- -
    -
    
    ------ ------- -
        -------------------------------------
    -
    
    ------ -------- -
        ---------------------------
    -
    
    ------ --- ------ -
        --- ------ - --------------------------------------
        -- --------- ------ -----
        ------ ------------------ 
    -
    
-
--- --------------
    -----
-----
--- -------------
    ------ --------
-----

------- ---------- ------------ ------------------
    -----
---------
------- ---------- ------------ -------------------
    ------
---------

-----
    ----------------- --- ------- ----------
------

Validate id_token

You can hook in an implementation of the interface TokenValidator to validate the signature of the received id_token and its at_hash property. This packages provides two implementations:

  • JwksValidationHandler
  • NullValidationHandler

The former one validates the signature against public keys received via the discovery document (property jwks) and the later one skips the validation on client side. 

------ - --------------------- - ---- ----------------------

-----

---------------------------------------- - --- ------------------------

In cases where no ValidationHandler is defined, you receive a warning on the console. This means that the library wants you to explicitly decide on this.

Calling a Web API with OAuth-Token

Pass this Header to the used method of the Http-Service within an Instance of the class Headers:

--- ------- - --- ---------
    ---------------- ------- - - ----------------------------------
---

Refreshing a Token when using Implicit Flow

To refresh your tokens when using implicit flow you can use a silent refresh. This is a well-known solution that compensates the fact that implicit flow does not allow for issuing a refresh token. It uses a hidden iframe to get another token from the auth-server. When the user is there still logged in (by using a cookie) it will respond without user interaction and provide new tokens.

To use this approach, setup a redirect uri for the silent refresh:

------------------------------------------ - ---------------------- - -----------------------

Please keep in mind that this uri has to be configured at the auth-server too.

This file is loaded into the hidden iframe after getting new tokens. Its only task is to send the received tokens to the main application:

------
------
    --------
    --------------------------------- -----------------
    ---------
-------
-------

Please make sure that this file is copied to your output directory by your build task. When using the CLI you can define it as an asset for this. For this, you have to add the following line to the file .angular-cli.json:

--------- -
    ------
    ---------------------
--

To perform a silent refresh, just call the following method:

----
    -------------
    ----------------
    ---------- -- ---------------------- ---- ------
    ---------- -- ---------------------- ------- ------

When there is an error in the iframe that prevents the communication with the main application, silentRefresh will give you a timeout. To configure the timespan for this, you can set the property siletRefreshTimeout (msec). The default value is 20.000 (20 seconds).

Automatically refreshing a token when/ before it expires

To automatically refresh a token when/ some time before it expires, you can make use of the event token_expires:

----
    -------------
    -------
    --------- -- ------ -- ----------------
    ------------ -- -
        ----------------------------------
    ---

By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property timeoutFactor to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.

Callback after successful login

There is a callback onTokenReceived, that is called after a successful login. In this case, the lib received the access_token as well as the id_token, if it was requested. If there is an id_token, the lib validated it.

----------------------------
    ---------------- ------- -- -
        --
        -- ------ ---- --- ------- -- -------------
        -- ----- --- ---- -- ---- --- ---
        -- 
        --------------------- -----
        -----------------------
    -
---

Preserving State like the requested URL

When calling initImplicitFlow, you can pass an optional state which could be the requested url:

-----------------------------------------------------------------

After login succeeded, you can read this state:

----------------------------
    ---------------- ------ -- -
        ---------------------- ------------
    -
--

Custom Query Parameter

You can set the property customQueryParams to a hash with custom parameter that are transmitted when starting implicit flow.

----------------------------------- - -
    --------- -------
    ------------- -----------
--

Routing with the HashStrategy

If you are leveraging the LocationStrategy which the Router is using by default, you can skip this section.

When using the HashStrategy for Routing, the Router will override the received hash fragment with the tokens when it performs it initial navigation. This prevents the library from reading them. To avoid this, disable initial navigation when setting up the routes for your root module:

------ --- --------------- - -------------------------------- - 
    -------- -----
    ------------------ -----
---

After tryLogin did its job, you can manually perform the initial navigation:

----------------------------------- -- -
    ----------------------------
--

Another solution is the use a redirect uri that already contains the initial route. In this case the router will not override it. An example for such a redirect uri is

    ----------------------------

Events

------------------------------------ -- -
    ------------------------- ------- ---
--

Using Password-Flow

This section shows how to use the password flow, which demands the user to directly enter his or her password into the client.

Configure Library for Password Flow (using discovery document)

To configure the library you just have to set some properties on startup. For this, the following sample uses the constructor of the AppComponent which is called before routing kicks in.

Please not, that this configuation is quite similar to the one for the implcit flow.

------------ --- --
------ ----- ------------ -

  ------------------- ------------- ------------- -
      
        -- --- ----- --- -------- --- ---- ---- -- -- --- -----------
        -------------------------- - ----------------------

        -- --- --- ----- --- --- ----------- --- ------ ------ -------
        -- --- ----------- ---- ---- ---- ------- - ------- ----- ---- ------- ---- --- ----- -------------- -- ---------
        ----------------------- - ------- ------- ----- ------- ----------------

        -- --- ---------- -- --- -------------- -- ------- -------------- -- --- ------- -------
        -- ------- -- ------------
        ---------------------------------------------

        -- --- - ----- ------
        -- ------ ---- ---- --- ----------- ---- ---- ------ --- ------ -- -------- - ------ ------- --------
        -- --- -------- ---------- ----- ---- --- -------- ---- --- ---- -- ---- ------- --- ----- - ------ ------
        -- ---- --- ---- ----- --- - --- ---- ---- -- --- -------- ------ --- --- -------- -- ------ -----------------
        -- ----- ---- - ----- ------- -- -- ---- -- ----- -- -------
        ----------------------------------- - ---------

        -- ---- --------- -------- --- ---- --- -- ----- --- ----
        --- --- - ---------------------------------------------------------------------------------------------
        ---------------------------------------------------- -- -
            -- -- ---- ---- --- ---- ----
        ---

  -

-

Configure Library for Password Flow (without discovery document)

In cases where you don't have an OIDC based discovery document you have to configure some more properties manually:

------------ --- --
------ ----- ------------ -

  ------------------- ------------- ------------- -
      
        -- ---------
        ------------------------------- - -------------------------------------------------------------------------- 

        -- --- ---- ---- ---- --------
        -- ---- ------- -- --------- -- ---- --- -------- ---- ----- --- ------ ----
        -- ---- ------ ---- --- ------- -- ----- --- -- -------- ---- -- --- --- -------- ----
        -- -- --- ----- ---- ---- --- -- ----- ---- ----- --- ---- --- -- --- ----- ------ --- --- ---- ---- ----
        ---------------------------------- - -----------------------------------------------------------------------------

        -- --- ----- --- -------- --- ---- ---- -- -- --- -----------
        -------------------------- - ----------------------

        -- --- --- ----- --- --- ----------- --- ------ ------ -------
        ----------------------- - ------- ------- ----- ------- ----------------

        -- --- - ----- ------
        -- ------ ---- ---- --- ----------- ---- ---- ------ --- ------ -- -------- - ------ ------- --------
        -- --- -------- ---------- ----- ---- --- -------- ---- --- ---- -- ---- ------- --- ----- - ------ ------
        -- ---- --- ---- ----- --- - --- ---- ---- -- --- -------- ------ --- --- -------- -- ------ -----------------
        -- ----- ---- - ----- ------- -- -- ---- -- ----- -- -------
        ----------------------------------- - ---------

  -

-

Fetching an Access Token by providing the current user's credentials

---------------------------------------------------- --------------------- -- -
          
      -- ------- ---- ----- --- ----
      ------ ------------------------------------

---------- -- -

      -- ----- --- ------ ---- ----
      --- ------ - --------------------------------------
      -- -------- --------------------------- ------------------- 
  
--

There is also a short form for fetching the token and loading the user profile:

---------------------------------------------------------------------- ----------------- -- -
      --- ------ - --------------------------------------
      -- -------- --------------------------- ------------------- 
---

Refreshing the current Access Token

Using the password flow you MIGHT get a refresh token (which isn't the case with the implicit flow by design!). You can use this token later to get a new access token, e. g. after it expired.

---------------------------------------- -- -
          --------------------
--

HomePage

https://github.com/manfredsteyer/angular-oauth2-oidc#readme

Repository

git+https://github.com/manfredsteyer/angular-oauth2-oidc.git

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005606781e8991b448de8a4

阅读全文

猜你喜欢

  • npm 包 vue-loading 使用教程

    vue-loading 是一款基于 Vue.js 的组件库，用于在页面中添加各种类型的 loading 动画效果。此组件库支持多种样式和配置项，既方便又实用，非常适合在前端开发和设计中使用。

    3 年前
  • npm 包 ng4-gridstackstack 使用教程

    前言 在前端开发中，有时候需要实现拖拽布局的功能，这时候我们可以使用 ng4-gridstackstack 这个 npm 包来实现，以下是使用教程。 简介 ng4-gridstackstack 是基于...

    3 年前
  • npm 包 Vueloading 使用教程

    Vueloading 是一个为 Vue.js 框架开发的加载动画组件，可以在页面加载数据时显示加载动画，提高用户体验。本文将详细介绍如何使用 Vueloading。

    3 年前
  • npm 包 ah-slack-server-plugin 使用教程

    Node.js 的包管理工具 npm 是前端开发必不可少的工具之一，可以帮助我们在项目中快速使用各种第三方的工具库和插件。今天我们要介绍的是一个可以轻松地在 Slack 应用中集成自定义后台服务的 n...

    3 年前
  • jslm

    collect system, os, and user information. jslm collect system, os, and user information. installat...

    3 年前
  • npm包@interpals/react-redux-modal使用教程

    在前端开发中，模态对话框是一个经常使用的功能之一，它可以在当前页面的弹出框中展示一些额外信息或者让用户进行某些操作。而@interpals/react-redux-modal就是一款帮助我们方便地创建...

    3 年前
  • npm 包 calendar-young 使用教程

    calendar-young 是一个轻量级的 JavaScript 库，可用于在你的网站或应用程序中添加一个交互式的日历控件。它易于使用，自适应，并且能够处理各种日期和时间格式。

    3 年前
  • npm 包 ht-angular-client 使用教程

    简介 ht-angular-client 是一个基于 AngularJS 的封装库，提供了 HTTP 请求，ajax 封装，服务注入，拦截器，响应拦截器等功能。 安装 通过 npm 安装： --- -...

    3 年前
  • npm 包 istanbul-alpha-instrument 使用教程

    在前端开发中，我们经常会使用 NPM 包来完成项目中的某些功能。而 istanbul-alpha-instrument 包就是一款用于 JavaScript 代码覆盖率测试的 NPM 包。

    3 年前
  • npm 包 jsplumb_utils 使用教程

    在前端开发中，我们常常需要实现流程图、拓扑图等业务，这时候就需要用到 jsPlumb 这个流程图绘制库。不过jsplumb本身并不好用，需要很多自己实现的方法。这时候，npm 上的 jsplumb_u...

    3 年前
  • npm 包 simple-calendar 使用教程

    介绍 simple-calendar 是一个基于 JavaScript 的日历插件。它可以方便地在网页中添加日历功能，支持快速创建日历、大小调整、日期选择、语言切换等特性。

    3 年前
  • npm 包 vue-loadings 使用教程

    介绍 vue-loadings 是一个基于 Vue.js 的 npm 包，它可以为 Vue.js 应用程序提供加载中、成功和失败的状态。 安装 通过 npm 安装 vue-loadings 包。

    3 年前
  • 前端技术文章：使用fabric8-npm-pipeline-test-prj进行npm包测试

    npm包是web前端开发中常见的资源组织方式，但在开发、测试和部署过程中，我们需要一套系统化的工具来进行管理。fabric8-npm-pipeline-test-prj 是一款专门用于npm包测试的工...

    3 年前
  • npm 包 foox 使用教程

    前言 在前端开发中，我们经常会使用到各种各样的第三方库和框架，而 npm 就是一个非常流行的 JavaScript 包管理器。其中，foox 就是一个优秀的 npm 包，它提供了一些非常方便的工具和方...

    3 年前
  • npm 包 modal-service 使用教程

    在前端开发中，使用模态框（Modal）是经常遇到的需求之一。而 npm 包 modal-service 就是一个可用于创建模态框的便捷工具。本文将为大家介绍如何使用 modal-service 包创建...

    3 年前
  • npm 包 jsonschema-default-validator 使用教程

    在前端开发中，我们经常需要对用户输入或者服务器返回的数据进行验证和校验。数据结构的校验有助于减少代码的异常和错误，提高开发效率。jsonschema-default-validator 就是一款很好用...

    3 年前
  • npm 包 type-of-data 使用教程

    在前端开发中，我们经常需要对数据类型进行判断，比如判断一个变量是否为字符串、数字、对象、数组等等。为了方便更快速地进行数据类型判断，我们可以使用 npm 包中提供的 type-of-data。

    3 年前
  • npm 包 node-alps-env 使用教程

    介绍 node-alps-env 是一个 Node.js 环境下的全局配置包，可以方便地管理不同环境下的配置文件。通过使用这个包，可以将应用程序的配置文件从代码中分离出来，提高了代码的可读性和可维护性...

    3 年前
  • npm 包 create-react-generator 使用教程

    前言 在现代前端开发中，React 已经成为了一个非常流行的前端框架。在使用 React 进行开发过程中，我们通常需要快速搭建一个 React 项目，以便进行具体的开发工作。

    3 年前
  • npm 包 cloudflare-ips 使用教程

    什么是 cloudflare-ips？ cloudflare-ips 是一个 npm 包，它包含了 Cloudflare 所有的 IPv4 和 IPv6 地址。这些地址可以用于防止非法请求和进行 IP...

    3 年前

相关推荐

    暂无文章