项目作者: danilobuerger

项目描述 :
OAuth 2.0 Implicit Grant Flow with Redux
高级语言: JavaScript
项目地址: git://github.com/danilobuerger/redux-implicit-oauth2.git
创建时间: 2016-10-08T21:30:55Z
项目社区:https://github.com/danilobuerger/redux-implicit-oauth2

开源协议:MIT License

下载


Build Status Coverage Status

redux-implicit-oauth2

OAuth 2.0 Implicit Grant Flow with Redux.

Example (with React)

The following example displays either a login or logout button depending on the state.
Set the config object according to your OAuth 2.0 server parameters.
The redirect callback page should be on the same site as the rest of your app.

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import { connect } from 'react-redux'
  4. import { login, logout } from 'redux-implicit-oauth2'
  5. const config = {
  6. url: "https://example.com/authorize",
  7. client: "some_client_id",
  8. redirect: "https://example.com/callback.html",
  9. scope: "some_scope",
  10. width: 400, // Width (in pixels) of login popup window. Optional, default: 400
  11. height: 400 // Height (in pixels) of login popup window. Optional, default: 400
  12. }
  13. const Login = ({ isLoggedIn, login, logout }) => {
  14. if (isLoggedIn) {
  15. return <button type='button' onClick={logout}>Logout</button>
  16. } else {
  17. return <button type='button' onClick={login}>Login</button>
  18. }
  19. }
  20. Login.propTypes = {
  21. isLoggedIn: PropTypes.bool.isRequired,
  22. login: PropTypes.func.isRequired,
  23. logout: PropTypes.func.isRequired
  24. }
  25. const mapStateToProps = ({ auth }) => ({
  26. isLoggedIn: auth.isLoggedIn
  27. })
  28. const mapDispatchToProps = {
  29. login: () => login(config),
  30. logout
  31. }
  32. export default connect(mapStateToProps, mapDispatchToProps)(Login)

Don’t forget to add the reducer and middleware to your Redux store:

  1. import { createStore, combineReducers, applyMiddleware } from 'redux'
  2. import { authMiddleware, authReducer as auth } from 'redux-implicit-oauth2'
  3. const configureStore = (initialState) =>
  4. createStore(
  5. combineReducers({
  6. // other reducers
  7. auth
  8. }),
  9. initialState,
  10. applyMiddleware(
  11. // other middleware
  12. authMiddleware
  13. )
  14. )
  15. export default configureStore