@authing/guard-vue2 v5.3.4
English | 简体中文
Guard is a portable authentication component provided by authing. You can embed it in any application to handle complex user authentication processes in one stop.
Prepare your Vue2 project and follow the guide to connect Guard to your Vue2 project!
Install
npm install --save @authing/guard-vue2
Initialize
Key | Type | Default | Requires |
---|---|---|---|
appId | String | - | Y |
host | String | - | N |
redirectUri | String | - | N |
mode | normal / modal | normal | N |
defaultScene | GuardModuleType | login | N |
tenantId | String | - | N |
lang | zh-CN / en-US | zh-CN | N |
isSSO | Boolean | true | N |
config | Partial | - | N |
// From CDN
const guard = new GuardFactory.Guard({
appId: '62e22721c889dd44bad1dda2',
host: 'https://guard-test-2022.authing.cn',
redirectUri: 'http://localhost:3000/callback'
})
// From npm
import { GuardPlugin } from '@authing/guard-vue2'
import '@authing/guard-vue2/dist/esm/guard.min.css'
Vue.use(GuardPlugin, {
appId: '62e22721c889dd44bad1dda2',
host: 'https://guard-test-2022.authing.cn',
redirectUri: 'http://localhost:3000/callback'
})
// use Guard APIs in Components
export default {
created () {
console.log('this.$guard: ', this.$guard)
}
}
Guard for Vue2 provides three login modes
Embed mode
Render Guard component
this.$guard.start('#root').then(userInfo => {
console.log(userInfo)
})
modal mode
When the parameter 'mode' of Guard instantiation is' modal ', the modal mode is started, and the following API can be used to display and hide the guard.
this.$guard.show()
this.$guard.hide()
Redirect mode
Login by code, redirect to login page
this.$guard.startWithRedirect()
Auto handle redirect callback
this.$guard.handleRedirectCallback()
Logout
this.$guard.logout()
Regist events
this.$guard.on('load', e => {
console.log(e)
})
this.$guard.on('login', userInfo => {
console.log(userInfo)
})
// ......
Integrate authing js sdk instance
Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:
this.$guard.getAuthClient().then(authClient => {
authClient.registerByEmail()
authClient.validateToken()
// ...........
})
// ....
Refer to Authentication SDK
📚 Documentation
To check out live examples and docs, visit docs
3 days ago
3 days ago
2 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago