Instant authorization script
Use the instant authorization technology to enable users to log in to your website with their Yandex account. The user can authorize via the Instant login
widget or personal button:
- If the user is already logged in to their Yandex account on the current device, the widget or button will show their profile picture and name to continue authorizing on your website.
- If the user isn't logged in to their Yandex account yet, they can authorize using the widget or button.
The Instant login
widget is a popup window on your website where the user can log in with their Yandex account.
-
If the user is authorized:
-
If the user isn't authorized:
A personal button is an element for logging in to Yandex ID quickly that looks like a button. You can place the button on your website page:
-
If the user is authorized:
-
If the user isn't authorized:
After confirming the login, the user is redirected to the OAuth authorization screen with a list of data it grants your app access to.
Connecting
To set up instant authorization:
-
Prepare the page that will be receiving the OAuth token. The page will be displayed for a few milliseconds, so you can leave it white. Connect the
sdk-suggest-token.js
script on the page. -
-
At the Creating an app stage, choose Web services in the Platforms section.
-
At the Data access stage, choose the data your app will need to access.
-
At the App platforms stage, specify the link to the page that will be accepting an OAuth token in theRedirect URI field.
-
-
Prepare a page with the button or widget. Connect the
sdk-suggest.js
script on the page.Note
You can customize the personal button appearance using the
suggestParams
parameter. Customizing the widget appearance is not supported.
Limitations
Instant authorization won't work if at least one of the following parameters is set up in the user's browser:
-
The iframe is blocked.
-
Third-party cookies are blocked.
-
Cookies are completely disabled. In this case, an error is returned when calling YaAuthSuggest.init.
-
Javascript support is disabled.
Sdk-suggest.js script
Enable one of the script versions on the user authorization page:
<head>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
</head>
See Also
<head>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-latest.js"></script>
</head>
Syntax
YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin)
Call example for the widget:
YaAuthSuggest.init({
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://example.com/suggest/token'
},
'https://example.com'
)
.then(({
handler
}) => handler())
.then(data => console.log('Message with the token', data))
.catch(error => console.log('Error processing', error));
YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, suggestParams)
Call example for the personal button:
YaAuthSuggest.init({
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://example.com/suggest/token'
},
'https://example.com', {
view: 'button',
parentId: 'container',
buttonView: 'main',
buttonTheme: 'light',
buttonSize: 'm',
buttonBorderRadius: 0
}
)
.then(({
handler
}) => handler())
.then(data => console.log('Message with the token', data))
.catch(error => console.log('Error processing', error));
Parameters
Parameter |
Description |
|
Contains the query parameters that the OAuth authorization page will be opened with:
See the list of all query parameters. |
|
The origin of the page that accepts the token and that the user will be redirected to from OAuth. Needed to enable the page with the widget or button to interact with the page that accepts the token via |
|
Parameter for choosing button appearance:
|
Returned value
{
status: 'ok',
handler: handler,
}
{
status: 'error',
code: '...'
}
Response parameters
Parameter |
Description |
|
Response status:
|
|
The function that returns Promise as iframe with a button or widget if |
|
Error code if |
Sdk-suggest-token.js script
Enable one of the sdk-suggest-token.js script versions on the page that will accept an OAuth token:
<head>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
</head>
See Also
<head>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-latest.js"></script>
</head>
Syntax
YaSendSuggestToken(origin, extraData)
Call example for the widget or personal button:
YaSendSuggestToken(
'https://example.com', {
flag: true
}
)
Parameters
Parameter |
Description |
|
Origin of the page with the button or widget that a |
|
Additional data sent to the page with the suggestion. Must be a valid JSON object. |
Returned value
The function receives information about the token from location.search
and location.hash
and then sends a postMessage
with the information to the page with the widget or button and closes the current window. Doesn't return anything.
Usage example
Note
To connect a personal button, specify the additional suggestParams
parameters:
view
.parentId
.buttonView
.buttonTheme
.buttonSize
.buttonBorderRadius
.
To connect a personal button, use the code below. To connect the widget, use the provided code without the additional suggestParams
parameters.
<!doctype html>
<html lang="ru">
<head>
<meta charSet="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<style>
html,
body {
background: #eee;
}
</style>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
</head>
<body>
<script>
window.onload = function() {
window.YaAuthSuggest.init({
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://examplesite.com/suggest/token'
},
'https://examplesite.com', {
view: 'button',
parentId: 'container',
buttonView: 'main',
buttonTheme: 'light',
buttonSize: 'm',
buttonBorderRadius: 0
}
)
.then(function(result) {
return result.handler()
})
.then(function(data) {
console.log('Message with the token: ', data);
document.body.innerHTML += `Message with the token: ${JSON.stringify(data)}`;
})
.catch(function(error) {
console.log('Something went wrong: ', error);
document.body.innerHTML += `Something went wrong: ${JSON.stringify(error)}`;
});
};
</script>
</body>
</html>
When connecting the widget or personal button on the page that receives the token, use the code:
<!doctype html>
<html lang="ru">
<head>
<meta charSet="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<style>
html,
body {
background: #eee;
}
</style>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
</head>
<body>
<script>
window.onload = function() {
window.YaSendSuggestToken("https://examplesite.com", {
"kek": true
});
};
</script>
</body>
</html>