@coreo/ionic-auth

@coreo/ionic-auth

Ionic 2+ module for integrating with Coreo via email/facebook/google/etc.

Installation

npm install @coreo/ionic-auth

Usage

Import the module in your app.module.ts:

import { CoreoAuthModule } from '@coreo/ionic-auth';
...
@NgModule({
    imports: [
        ...
        CoreoAuthModule
        ...
    ]
})
export class AppModule {}

Setting up OAuth providers

Facebook

• In your Ionic project, make sure you have a widget ID setup in your config.xml file.
• Go to https://developers.facebook.com. In the top right hand corner, hover over 'My Apps' and choose 'Add a New App'. Follow through the wizard to set up the app, don't add any products.
• In the Facebook Dashboard, click on the 'Settings' section in the left hand menu.
• Enter a display name, app icon and contact email address.
• Click the 'Add Platform' button, and choose iOS. In the 'Bundle ID' section, add the widget ID from your config.xml file.
• Click the 'Add Platform' button, and choose Android. In the 'Google Play Package Name' enter your widget ID.
• You now need to generate an Android keystore hash. Do this with the following command: keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64 - replacing <RELEASE_KEY_ALIAS> with your keystore alias and pointing to your <RELEASE_KEY_PATH>.
• Under the 'Dashboard' section, copy the App ID.
• In your ionic project, install the facebook plugin with ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication", changing the App ID and App Name as appropriate.
• Go to Coreo, and find the correct project. Get the project ID and set it as the projectId option in your call to CoreoModule.forRoot({}) in your app's module file.
• Back in Coreo, go to the 'OAuth Credentials' tab. Click 'Create Credential'. Choose the 'Facebook' provider, and enter the App ID and secret from the Facebook Dashboard here.

You should now be able to use the Facebook login component.

Google

• In your Ionic project, make sure you have a widget ID setup in your config.xml file.
• Follow the instructions in this section: https://github.com/EddyVerbruggen/cordova-plugin-googleplus#3-google-api-setup
• Take the reverse client ID from the resulting .plist file.
• In your ionic project, install the plugin with ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=<REVERSED_CLIENT_ID>. The REVERSED_CLIENT_ID will start with com.googleusercontent.apps.
• Go to Coreo, and find the correct project. Get the project ID and set it as one of the options in your call to CoreoModule.forRoot({}) in your app's module file.
• Go to the Google Developer console at https://console.developers.google.com. Make sure you have selected the correct project.
• Click on the Credentials section on the left hand menu.
• Under 'OAuth 2.0 client IDs', click on the 'Web client'.
• Under the 'Authorised redirect URIs' section, add the following addresses (make sure you click Save afterwards):
  • https://coreo-dev.herokuapp.com/auth/google/callback
  • https://api.coreo.io/auth/google/callback
• In a separate browser tab, go to Coreo. Go to the 'OAuth Credentials' tab. Click 'Create Credential'. Choose the 'Google' provider, and enter the App ID and secret from the other tab here.
• Use the web client ID and set it as the googleWebClientId in your call to CoreoModule.forRoot({}) in your app's module file.