Добавить следующий код на страницу где нужно расположить иконки социальных сетей:
<div id="anycomment-login"></div>
<script>
AnyComment = window.AnyComment || []; AnyComment.Login = [];
window.AnyComment.Login.push({
root: 'anycomment-login',
app_id: APP_ID,
providers: 'vkontakte,twitter,odnoklassniki,google,mailru',
options: {
show_login_with: false,
},
onLogin: function (envelope) {
console.log(envelope);
}
});
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "https://cdn.anycomment.io/assets/js/login.js";
var sa = document.getElementsByTagName("script")[0];
sa.parentNode.insertBefore(s, s.nextSibling);
</script>
Замените APP_ID на ID своего сайта. Для этого нужно зарегистрироваться и добавить сайт.
Параметр | Тип | Описание |
---|---|---|
root | string | Контейнер куда добавить иконки авторизации |
app_id | integer | ID сайта, возможно получить после регистрации сайта на сервисе |
providers | string | Список соц. сетей (провайдеры) для отображения разделенные запятыми (CSV). В таком же порядке будут расположены |
options | object | Дополнительные опции. Смотреть ниже |
Дополнительные опции:
Параметр | Тип | Описание |
---|---|---|
show_login_with | boolean | Нужно ли отображать "Войти с" или нет. |
Доступные провайдеры ("Ключ" это то, что нужно указывать в providers
):
Ключ | Название соц. сети |
---|---|
vkontakte | Вконтакте |
github | GitHub |
google | |
facebook | |
twitter | |
odnoklassniki | Одноклассники |
instagram | |
dribbble | Dribbble |
yandex | Яндекс |
mailru | Mail.Ru |
envelope
в onLogin
вернет следующую структуру (TypeScript определение):
interface LoginEnvelope {
is_auth: boolean;
user: UserIdentity
}
interface UserIdentity {
about: string | null;
avatar_url: string | null;
created_date: string;
email: string | null;
first_name: string | null;
id: number;
is_moderator: boolean;
last_name: string | null;
name: string;
sex: null | 0 | 1;
social_url: string | null;
username: string | null;
meta: MetaEnvelope
token: string;
token_valid_until: number;
token_lifetime: number;
}
interface MetaEnvelope {
new_email_requested: boolean;
}
{
"is_auth":true,
"user":{
"id":4157,
"provider":"vkontakte",
"provider_id":"1234567",
"email":"vasya.petrov@gmail.com",
"first_name":"Вася",
"last_name":"Петров",
"name":"Вася петров",
"is_moderator":false,
"sex":0,
"username":"138463530",
"social_url":"https://vk.com/vasya.url.example",
"avatar_url": null,
"about":null,
"created_date":"2019-10-31 19:21:59+01"
},
"token": "-BNuM4jE1Da2GZpB2Im-Xb-r4mTx--2d_OlC4ZRBdvN9y0st3T4VDp9UiWRu_v17",
"token_valid_until": 1575224078,
"token_lifetime": 86400
}
О полях подробнее:
Поле | Описание |
---|---|
is_auth | Авторизован пользователь или нет. |
user | Объект с инорфмацией о пользователе. null когда is_auth равно false . |
Объект user
:
Поле | Описание |
---|---|
id | Уникальный идентификатор пользователя на AnyComment.io. |
provider | Социальная сеть через которую авторизован пользователь. null когда гость. |
provider_id | Уникальный идентификатор из социальной сети. Может быть null в некоторых случаях. |
email | Почта пользователи. null когда гость или почта не была отдана социальной сетью. |
first_name | Имя. |
last_name | Фамилия. |
name | Имя и фамилия. |
is_moderator | Флаг является ли пользователь модератором или нет. |
sex | Пол. null - неизвестно, 0 - мужской, 1 - женский |
username | Уникальный логин пользователя. Доступные символы [a-z-_] . Тире/подчеркивание до или после логина недопустимы. |
social_url | Ссылка на пользователя в социальной сети. |
avatar_url | Ссылка на аватарку пользовталея. |
about | Информация о пользователе, заполняется самим пользователем. |
created_date | Дата когда профиль был создан. |
token | Уникальный токен с помощью которого на стороне сервера можно подтвердить валидность данных. |
token_valid_until | Время в секундах когда токен будет считаться просроченным. |
token_lifetime | Время жизни токена в секундах. По умолчанию: 86400 - 1 день. |
Объект meta
:
Поле | Описание |
---|---|
new_email_requested | Был ли сделан доступ на смену почты. true = да и новая почта еще пока не была установлена, false - иначе. |