[英]How to set up Okta Signin Widget in Vue Okta app
I am attempting to integrate the okta signin widget into a Vue 3 project, based on the following: (Okta Sign-In Widget and Vue | Okta Developer).我正在尝试基于以下内容将 okta 登录小部件集成到 Vue 3 项目中:(Okta 登录小部件和 Vue | Okta 开发人员)。 However, it appears that OktaSignIn is not available to import into the config files even after installing via
yarn add @okta/okta-signin-widget
.但是,即使通过
yarn add @okta/okta-signin-widget
安装,OktaSignIn 似乎也无法导入配置文件。 In other words, I cannot add import OktaSignIn from '@okta/okta-signin-widget'
to the main.ts, as the package does not appear to be available.换句话说,我无法将
import OktaSignIn from '@okta/okta-signin-widget'
添加到 main.ts,因为 package 似乎不可用。 Is this widget not yet available for Vue 3 or Vue CLI 4?这个小部件是否还不适用于 Vue 3 或 Vue CLI 4?
Example:例子:
import OktaSignIn from '@okta/okta-signin-widget'
import { OktaAuth } from '@okta/okta-auth-js'
const oktaSignIn = new OktaSignIn({
baseUrl: 'https://${yourOktaDomain}',
clientId: '${clientId}',
redirectUri: 'http://localhost:8080/login/callback',
authParams: {
pkce: true,
issuer: 'https://${yourOktaDomain}/oauth2/default',
display: 'page',
scopes: ['openid', 'profile', 'email']
}
});
const oktaAuth = new OktaAuth({
issuer: 'https://${yourOktaDomain}/oauth2/default',
clientId: '${clientId}',
redirectUri: window.location.origin + '/login/callback',
scopes: ['openid', 'profile', 'email']
})
export { oktaAuth, oktaSignIn };
By "the package does not appear to be available", I assume you're referring to this TypeScript error:通过“package 似乎不可用”,我假设您指的是这个 TypeScript 错误:
Could not find a declaration file for module
'@okta/okta-signin-widget'
.找不到模块
'@okta/okta-signin-widget'
的声明文件。'/projectRoot/node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js'
implicitly has an'any'
type.'/projectRoot/node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js'
隐含地具有'any'
类型。Try
npm i --save-dev @types/okta__okta-signin-widget
if it exists or add a new declaration (.d.ts) file containingdeclare module '@okta/okta-signin-widget';
如果存在,请尝试
npm i --save-dev @types/okta__okta-signin-widget
或添加包含declare module '@okta/okta-signin-widget';
That module does not yet support its own typings, but there's an open PR for it .该模块尚不支持其自己的类型,但有一个开放的 PR 。 As a workaround, you can declare the typings in your project at
src/okta-signin-widget.d.ts
, based on the PR's changes :作为一种解决方法,您可以根据 PR 的更改在
src/okta-signin-widget.d.ts
声明项目中的类型:
declare module '@okta/okta-signin-widget' {
export default class OktaSignIn implements OktaSignIn {
constructor(configuration: OktaSignInConfig)
renderEl(configuration: { el: string }): void
remove(): void
session: {
get: (callback: (repsonse: any) => void) => void
}
}
export type OktaSignInConfigAuthParamsResponseMode = 'okta_post_message' | 'fragment' | 'query' | 'form_post'
export interface OktaSignInConfigAuthParams {
pkce?: boolean
responseMode?: OktaSignInConfigAuthParamsResponseMode
issuer?: string
display?: 'page'
scopes?: string[]
responseType?: string[]
}
interface OktaSignInConfigi18n {
en?: {
'primaryauth.username.placeholder'?: string
'primaryauth.username.tooltip'?: string
'primaryauth.title'?: string
'error.username.required'?: string
'error.password.required'?: string
}
}
interface OktaSignInConfig {
baseUrl: string
logo?: string
clientId?: string
redirectUri?: string
authParams: OktaSignInConfigAuthParams
i18n?: OktaSignInConfigi18n
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.