0.1.1 • Published 11 months ago
anshulv1401-sign-in-with-esignet v0.1.1
sign-in-with-esignet
Renders a button that will navigate the user to esignet website for authentication. Follows Open Id connect protocol.
Installation
# using npm
npm i sign-in-with-esignet
# using yarn
yarn add sign-in-with-esignetProps
| prop | type | default value | note |
|---|---|---|---|
oidcConfig | Json Object | Open Id connect configurations | |
buttonConfig | Json Object | Configuration for sign in button |
Prop oidcConfig
| field | type | required | default value | note |
|---|---|---|---|---|
authorizeUri | string | Yes | The authorize URI on the authorization server is where an OpenID Connect flow starts. | |
redirect_uri | string | Yes | The redirect URI tells the issuer where to redirect the browser back to when the flow is done. | |
client_id | string | Yes | Every client (website or mobile app) is identified by a client ID. The client ID is a public value that does not have to be protected. | |
scope | string | Yes | Clients can request additional information or permissions via scopes. The openid scope is the only required scope. | |
response_type | string | No | code | The authorization server will respond with a code, which the client can exchange for tokens on a secure channel. |
nonce | string | No | A nonce (or number used once) is a random value that is used to prevent replay attacks. | |
state | string | Recommanded | The state is an optional value that is carried through the whole flow and returned to the client. Random value will be created if not provided. | |
acr_values | string | No | Requested Authentication Context Class Reference values | |
claims | string | No | The Client can obtain Claims about the End-User and the Authentication event. For more detail check Claims. | |
claims_locales | string | No | End-User's preferred languages and scripts for Claims being returned. | |
ui_locales | string | No | End-User's preferred languages and scripts for the user interface | |
display | string | No | ASCII string value that specifies how the Authorization Server displays the authentication and consent user interface pages to the end user. Allowed values: page popup touch wap | |
max_age | string | No | Maximum Authentication Age. This specifies the allowable elapsed time in seconds since the last time the end user was actively authenticated by the OP. | |
prompt | string | No | Space delimited case-sensitive list of ASCII string values that specifies whether the Authorization Server prompts the End-User for re-authentication and consent. Allowed values: none login consent select_account |
Prop buttonConfig
| field | type | valid values | default value | note |
|---|---|---|---|---|
type | string | (“standard”, “icon”) | "standard" | The button type: icon, or standard button. |
theme | string | (“outline”, “filled_blue”, “filled_black”, “custom”) | “outline” | The button theme. |
shape | string | (“sharp_edges”, “soft_edges”, “rounded_edges”) | “sharp_edges” | The button shape. |
labelText | string | “Sign in with Esignet” | The button text. | |
logoPath | string | esignet logo | Path to the id provider’s logo | |
width | number | 400px | The button width, in pixels | |
background | string | Background property of esignet button | ||
textColor | string | Color of label text | ||
borderColor | string | Border color of esignet button | ||
borderWidth | string | Border width of esignet button | ||
font | string | font of the label text | ||
fontFamily | string | font family of the label text | ||
customStyle | string | Custom styling option |
Usage
# using import
import { SignInWithEsignet } from "sign-in-with-esignet";Example
React JS
//configuration for Open id connect
useEffect(() => {
SignInWithEsignet({
oidcConfig: {
authorizeUri: "https://esignet.dev.mosip.net/authorize",
redirect_uri: "https://healthservices.dev.mosip.net/userprofile",
client_id: "88Vjt34c5Twz1oJ",
scope: "openid profile",
},
buttonConfig: {
shape: "soft_edges",
theme: "filled_orange",
},
signInElement: document.getElementById("sign-in-with-esignet"),
});
}, []);
export default function MyComponent() {
return (
<div id="sign-in-with-esignet"></div>
);
}
/>;HTML
<!DOCTYPE html>
<html>
<body>
<script type="module">
import { SignInWithEsignet } from "<signin button JS url>";
window.onload = function () {
SignInWithEsignet({
oidcConfig: {
authorizeUri: "https://esignet.dev.mosip.net/authorize",
redirect_uri: "https://healthservices.dev.mosip.net/userprofile",
client_id: "88Vjt34c5Twz1oJ",
scope: "openid profile",
},
buttonConfig: {
shape: "soft_edges",
theme: "filled_orange",
},
signInElement: document.getElementById("sign-in-with-esignet"),
});
};
</script>
<div id="sign-in-with-esignet"></div>
</body>
</html>
/>;