Merge pull request #76 from Authing/dev-local

chore: add webpack.dev.config.js, enable development in localhost
Authing · Jul 27, 2023 · 592fd65 · 592fd65
2 parents 066d5d5 + 2133bc1
commit 592fd65
Show file tree

Hide file tree

Showing 5 changed files with 1,365 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "module": "build/module",
   "scripts": {
     "test": "jest",
+    "dev": "webpack-dev-server --config webpack.dev.config.js",
     "build:umd": "webpack",
     "build:module": "tsc -p tsconfig.module.json",
     "build": "yarn clean && yarn build:umd && yarn build:module",
@@ -36,16 +37,18 @@
     "ali-oss": "^6.16.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "1.0.4",
+    "chalk": "^4.1.0",
+    "conventional-changelog-cli": "^2.0.31",
+    "execa": "^4.0.2",
+    "html-webpack-plugin": "^5.5.3",
     "jest": "^27.2.5",
+    "node-console-colors": "^1.1.4",
     "ts-jest": "^27.1.2",
     "ts-node": "^10.4.0",
     "typescript": "^3.0.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1",
-    "chalk": "^4.1.0",
-    "conventional-changelog-cli": "^2.0.31",
-    "execa": "^4.0.2",
-    "node-console-colors": "^1.1.4"
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
@@ -55,4 +58,4 @@
     "url-polyfill": "^1.1.12",
     "yarn": "^1.22.17"
   }
-}
+}
diff --git a/src/example.ts b/src/example.ts
@@ -0,0 +1,40 @@
+import { AuthingSSO } from './index'
+
+const auth = new AuthingSSO({
+  appId: 'AUTHING_APP_ID',
+
+  // SSO 应用面板地址
+  origin: 'https://{SSO 应用面板地址}.authing.cn',
+
+  // 应用登录回调 URL
+  redirectUri: 'http://localhost:3001/login/callback'
+})
+
+window.onload = async function () {
+  let res = await auth.trackSession()
+  if (res.session !== null) {
+    document.getElementById('h1-user-info').style.display = 'block'
+    document.getElementById('user-info').innerHTML = JSON.stringify(res.userInfo, null, 4)
+    document.getElementById('btn-logout').style.display = 'inline'
+  } else {
+    document.getElementById('h1-login').style.display = 'block'
+    document.getElementById('btn-login').style.display = 'inline'
+  }
+}
+
+document.getElementById('btn-login').addEventListener('click', function () {
+  auth.login({
+    scope: 'openid profile email phone',
+    responseMode: 'fragment',
+    responseType: 'code token',
+    state: Math.random().toString(),
+    nonce: Math.random().toString()
+  })
+})
+
+document.getElementById('btn-logout').addEventListener('click', function () {
+  auth.logout().then((res) => {
+    alert(JSON.stringify(res))
+    location.reload()
+  })
+})
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AuthingSSO DEV</title>
+</head>
+
+<body>
+  <h1 id="h1-login" style="display: none;">请登录</h1>
+  <input type="button" value="登录" id="btn-login" style="display: none;" />
+  <h1 id="h1-user-info" style="display: none;">用户信息</h1>
+  <input type="button" value="登出" id="btn-logout" style="display: none;" />
+  <pre id="user-info"></pre>
+</body>
+
+</html>
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -0,0 +1,61 @@
+const path = require('path')
+
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const resolve = function (...args) {
+  return path.resolve(__dirname, ...args)
+}
+
+module.exports = {
+  mode: 'development',
+  entry: resolve('./src/example.ts'),
+  module: {
+    rules: [
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    chrome: '49',
+                    ie: '11',
+                  },
+                  useBuiltIns: 'usage',
+                  corejs: {
+                    version: 3, // 使用core-js@3
+                    proposals: true,
+                  },
+                },
+              ],
+              '@babel/preset-typescript',
+            ],
+            plugins: [
+              '@babel/plugin-transform-runtime',
+              '@babel/plugin-transform-arrow-functions',
+            ],
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: resolve('./src/index.html'),
+      filename: 'index.html'
+    })
+  ],
+  devServer: {
+    host: 'localhost',
+    port: 3004,
+    hot: true,
+    open: true
+  }
+}