IonicAuthSocial

Модуль для Ionic Framework, авторизации с помощью социальных сетей.

Реализованы социальные сети:

ВКонтакте
Одноклассники
Яндекс
Google
Facebook
Microsoft

Видео демонстрация: https://youtu.be/eb6bEoY0-Jo

Отлажена авторизация на iOS.

Android будет на днях.

Результат работы: token авторизации социальной сети.

Установка

npm i ionic_auth_social --save
ionic cordova plugin add cordova-plugin-app-launcher
ionic cordova plugin add cordova-plugin-advanced-http
ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=authSocial

Использование

В app.module необходимо добавить:

import { IonicAuthSocialModule } from 'ionic_auth_social';

imports: [    
    IonicAuthSocialModule.forRoot()
]

На странице:

import { IonicAuthSocialService, TypeAuth } from 'ionic_auth_social';

constructor(
    private authService: IonicAuthSocialService
) {
    this.authService.handleOpenURL();
}

authVK() { // авторизация ВКонтакте
  this.authService.auth(TypeAuth.VK, '6954125').subscribe(token => {
    console.log('token: ', token);
  });
}

authYandex() { // авторизация Яндекс
  this.authService.auth(TypeAuth.Yandex, '80db6aa164e34e80a968cb3627f001a0',
    '8ed0ec8f92484107bc8cf26435dc2ff6').subscribe(token => {
      console.log('token: ', token);
    });
}

authOK() { // авторизация Одноклассники
  this.authService.auth(TypeAuth.OK, '1278147072').subscribe(token => {
    console.log('token: ', token);
  });
}

authFB() { // авторизация Facebook
  this.authService.auth(TypeAuth.Facebook, '1556984744438759').subscribe(token => {
    console.log('token: ', token);
  });
}

authGoogle() { // авторизация Google
  this.authService.auth(TypeAuth.Google, '991228963133-t1s59c3ue8hpe95h650dain2k2s3usck').subscribe(token => {
    console.log('token: ', token);
  });
}

authMicrosoft() { // авторизация Microsoft
  this.authService.auth(TypeAuth.Microsoft, 'ae0c4798-7245-4325-94e8-c63f6ccee56b').subscribe(token => {
    console.log('token: ', token);
  });
}

В config.xml в секции добавить, заменив на свои индетификаторы приложений:

<edit-config file="*-Info.plist" mode="merge" target="CFBundleURLTypes">
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>vk</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>vk6954125</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>yandex</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>yx80db6aa164e34e80a968cb3627f001a0</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLIconFile</key>
            <string />
            <key>CFBundleURLName</key>
            <string>ok</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>ok1278147072</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>facebook</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>fb1556984744438759</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>google</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>com.googleusercontent.apps.991228963133-t1s59c3ue8hpe95h650dain2k2s3usck</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>Microsoft</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>msalae0c4798-7245-4325-94e8-c63f6ccee56b</string>
            </array>
        </dict>
    </array>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="LSApplicationQueriesSchemes">
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>yandexauth2</string>
        <string>vkauthorize</string>
        <string>okauth</string>
        <string>fbauth2</string>
    </array>
</edit-config>

Для тестирования на предустановленных id приложений социальных сетей bundle id должен быть установлен в ru.xsfera.authSocial.

В темплейте можно использовать:

  <ion-item (click)="authVK()">
      ВКонтакте
  </ion-item>
  <ion-item (click)="authYandex()">
      Яндекс
  </ion-item>
  <ion-item (click)="authOK()">
      Одноклассники
  </ion-item>
  <ion-item (click)="authFB()">
      Facebook
  </ion-item>
  <ion-item (click)="authGoogle()">
      Google
  </ion-item>
  <ion-item (click)="authMicrosoft()">
      Microsoft
  </ion-item>

Регистрация приложений в соц. сетях

Для Yandex включите Веб-сервисы и установите CallBack URL yx80db6aa164e34e80a968cb3627f001a0://authorize где 80db6aa164e34e80a968cb3627f001a0 - id вашего приложения

Для Одноклассников сначало создайте приложение. Затем войдя в настройки приложения воспользуйтесь «Подключить OAuth» в поле redirect_uri укажите ok1278147072://authorize где 1278147072 - id вашего приложения (он придет на почту) так же необходимо воспользоваться «Добавить платформу» в «Тип приложения» выбрать iOS разрешить клиентскую OAuth авторизацию в поле redirect_uri укажите ok1278147072://authorize

npm