Fork me on GitHub

WhatsApp Clone with Meteor and Ionic 2 CLI

https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp

Ionic 3 Version (Last Update: 2017-06-15)

Legacy Tutorial

2016-11-22

Socially Merge

2017-02-01

Ionic 3

2017-06-15

Angular 4.4.3 + Meteor 1.6

2017-10-12
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

Facebook authentication

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step we are going to implement Facebook auth and allow our users to start new chats with their Facebook friends who already use our app.

First we will have to install a couple of Meteor packages:

api$ meteor add btafel:accounts-facebook-cordova
api$ meteor add service-configuration

Then we will need to add the Cordova plugin cordova-plugin-facebook4:

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1800004730327605" --variable APP_NAME="Meteor - Test1" --save

Now we need to configure oauth services using service-configuration:

17.3 Configure oauth services using service-configuration api/server/main.ts 
2
3
4
5
6
7
8
 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Picture } from './models';
import { Accounts } from 'meteor/accounts-base';
import { Users } from './collections/users';
declare const ServiceConfiguration: any;
 
Meteor.startup(() => {
  if (Meteor.settings) {
...some lines skipped...
    SMS.twilio = Meteor.settings['twilio'];
  }
 
  // Configuring oAuth services
  const services = Meteor.settings.private.oAuth;
 
  if (services) {
    for (let service in services) {
      ServiceConfiguration.configurations.upsert({service: service}, {
        $set: services[service]
      });
    }
  }
 
  if (Users.collection.find().count() > 0) {
    return;
  }
Improve this code

And store credentials in settings.json:

17.4 Store credentials in settings.json api/private/settings.json 
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    "adminPhoneNumbers": ["+9721234567", "+97212345678", "+97212345679"],
    "phoneVerificationMasterCode": "1234"
  },
  "public": {
    "facebook": {
      "permissions": [
        "public_profile",
        "user_friends",
        "email"
      ],
      "profileFields": [
        "name",
        "gender",
        "location"
      ]
    }
  },
  "private": {
    "fcm": {
      "key": "AIzaSyBnmvN5WNv3rAaLra1RUr9vA5k0pNp0KuY"
    },
    "oAuth": {
      "facebook": {
        "appId": "1800004730327605",
        "secret": "57f57a93e8847896a0b779c0d0cdfa7b"
      }
    }
  }
}
Improve this code

Since accounts-facebook-cordova pollutes our user profile on Cordova, let's filter it in our ProfilePage:

17.5 Filter user profile src/pages/profile/profile.ts 
22
23
24
25
26
27
28
29
30
31
  ) {}
 
  ngOnInit(): void {
    this.profile = (({name = '', pictureId} = {}) => ({
      name,
      pictureId
    }))(Meteor.user().profile);
 
    MeteorObservable.subscribe('user').subscribe(() => {
      let platform = this.platform.is('android') ? "android" :
Improve this code

Now we can create a test login method to check if everything works so far:

17.6 Create a test login method and bind it to the user interface src/pages/login/login.html 
22
23
24
25
26
27
28
29
30
31
  <ion-item>
    <ion-input [(ngModel)]="phone" (keypress)="onInputKeypress($event)" type="tel" placeholder="Your phone number"></ion-input>
  </ion-item>
 
  <ion-item>
    <ion-buttons>
      <button ion-button (click)="loginFacebook()">Login with Facebook</button>
    </ion-buttons>
  </ion-item>
</ion-content>
Improve this code
17.6 Create a test login method and bind it to the user interface src/pages/login/login.ts 
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
    alert.present();
  }
 
  loginFacebook(): void {
    const options = {
      requestPermissions: ['public_profile', 'user_friends', 'email']
    };
 
    (<any>Meteor).loginWithFacebook(options, (error: Error) => {
      if (error) {
        this.handleError(error);
      } else {
        console.log("Logged in with Facebook succesfully.");
        console.log(Meteor.user());
      }
    });
  }
 
  handleLogin(alert: Alert): void {
    alert.dismiss().then(() => {
      return this.phoneService.verify(this.phone);
Improve this code

Facebook callbacks will be handled by the Meteor server, which runs on a different port (3000) than the client. Since the request will come from the client (port 8100) we will face cross origin issues, so we will need to pass every connection through an Nginx proxy:

17.7 Let every connection pass through Nginx meteor-client.config.json 
1
2
3
4
5
6
7
{
  "runtime": {
    "DDP_DEFAULT_CONNECTION_URL": "http://meteor.linuxsystems.it",
    "ROOT_URL": "http://meteor.linuxsystems.it"
  },
  "import": [
Improve this code
17.7 Let every connection pass through Nginx package.json 
9
10
11
12
13
14
15
 
113
114
115
116
    "url": "https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp.git"
  },
  "scripts": {
    "api": "cd api && export ROOT_URL=http://meteor.linuxsystems.it && meteor run --settings private/settings.json",
    "api:reset": "cd api && meteor reset",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
...some lines skipped...
      "android"
    ]
  }
}
Improve this code

Nginx will listen on port 80 and redirect our requests to the client (port 8100) or to the server (port 3000) depending on the path. Obviously we will have to install Nginx, then we will have to edit its config and restart it:

server {
  listen 80;
  server_name meteor.linuxsystems.it;

  location / {
    proxy_pass http://meteor.linuxsystems.it:8100;
  }

  location ~ ^/(_oauth|packages|ufs) {
    proxy_pass http://meteor.linuxsystems.it:3000;
  }

  location /sockjs {
    proxy_pass http://meteor.linuxsystems.it:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  error_page  500 502 503 504  /50x.html;

  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

From now on we will need to use meteor.linuxsystems.it instead of localhost:8100 to reach our application. You cannot simply use localhost or an IP address because the Facebook API necessarily wants a FQDN, so you will have to either point meteor.linuxsystems.it to you own IP (for example editing /etc/hosts) or simply change you local IP address to match the one resolved by meteor.linuxsystems.it.

Note that if you decide to edit /etc/hosts you will have to do so for every device, including your smartphone.

Now that we know that everything works we can remove our login test code:

17.8 Remove the login test code src/pages/login/login.html 
22
23
24
25
  <ion-item>
    <ion-input [(ngModel)]="phone" (keypress)="onInputKeypress($event)" type="tel" placeholder="Your phone number"></ion-input>
  </ion-item>
</ion-content>
Improve this code
17.8 Remove the login test code src/pages/login/login.ts 
50
51
52
53
54
55
    alert.present();
  }
 
  handleLogin(alert: Alert): void {
    alert.dismiss().then(() => {
      return this.phoneService.verify(this.phone);
Improve this code

Since we need to link our users to their Facebook accounts instead of creating brand new accounts, let's add the darkbasic:link-accounts Meteor package:

api$ meteor add darkbasic:link-accounts

Now we create the linkFacebook method in the phone service:

17.10 Create linkFacebook method in phone service src/services/phone.ts 
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
    });
  }
 
  linkFacebook(): Promise<any> {
    return new Promise((resolve, reject) => {
      const options = {
        requestPermissions: ['public_profile', 'user_friends', 'email']
      };
 
      // TODO: add link-accounts types to meteor typings
      (<any>Meteor).linkWithFacebook(options, (error: Error) => {
        if (error) {
          reject(new Error(error.message));
        } else {
          resolve();
        }
      });
    });
  }
 
  logout(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      Meteor.logout((e: Error) => {
Improve this code

And FacebookPage with its view and style sheet:

17.11 Create FacebookPage src/pages/login/facebook.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { Component } from "@angular/core";
import { Alert, AlertController, NavController } from "ionic-angular";
import { PhoneService } from "../../services/phone";
import { ProfilePage } from "../profile/profile";
 
@Component({
  selector: 'facebook',
  templateUrl: 'facebook.html'
})
export class FacebookPage {
 
  constructor(private alertCtrl: AlertController,
              private phoneService: PhoneService,
              private navCtrl: NavController) {
  }
 
  cancel(): void {
    const alert: Alert = this.alertCtrl.create({
      title: 'Confirm',
      message: `Would you like to proceed without linking your account with Facebook?`,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Yes',
          handler: () => {
            this.dontLink(alert);
            return false;
          }
        }
      ]
    });
 
    alert.present();
  }
 
  linkFacebook(): void {
    this.phoneService.linkFacebook()
      .then(() => {
        this.navCtrl.setRoot(ProfilePage, {}, {
          animate: true
        });
      })
      .catch((e) => {
        this.handleError(e);
      });
  }
 
  dontLink(alert: Alert): void {
    alert.dismiss()
      .then(() => {
        this.navCtrl.setRoot(ProfilePage, {}, {
          animate: true
        });
      })
      .catch((e) => {
        this.handleError(e);
      });
  }
 
  handleError(e: Error): void {
    console.error(e);
 
    const alert = this.alertCtrl.create({
      title: 'Oops!',
      message: e.message,
      buttons: ['OK']
    });
 
    alert.present();
  }
}
Improve this code
17.12 Create FacebookPage View src/pages/login/facebook.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ion-header>
  <ion-navbar color="whatsapp">
    <ion-title>Link with Facebook</ion-title>
 
    <ion-buttons end>
      <button ion-button class="done-button" (click)="cancel()">Cancel</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
 
<ion-content padding class="login-page-content">
  <div class="instructions">
    <div>
      You can link your account with Facebook to chat with more friends.
    </div>
    <br>
    <ion-item>
      <ion-buttons>
        <button ion-button (click)="linkFacebook()">Login with Facebook</button>
      </ion-buttons>
    </ion-item>
  </div>
</ion-content>
Improve this code
17.13 Create FacebookPage style sheet src/pages/login/facebook.scss 
1
2
3
4
5
6
7
8
9
10
11
.login-page-content {
  .instructions {
    text-align: center;
    font-size: medium;
    margin: 50px;
  }
 
  .text-input {
    text-align: center;
  }
}
Improve this code

Let's add it to app.module.ts:

17.14 Add FacebookPage to app.module.ts src/app/app.module.ts 
23
24
25
26
27
28
29
 
37
38
39
40
41
42
43
 
61
62
63
64
65
66
67
import { NewLocationMessageComponent } from '../pages/messages/location-message';
import { ShowPictureComponent } from '../pages/messages/show-picture';
import { ProfilePage } from '../pages/profile/profile';
import { FacebookPage } from "../pages/login/facebook";
import { VerificationPage } from '../pages/verification/verification';
import { PhoneService } from '../services/phone';
import { PictureService } from '../services/picture';
...some lines skipped...
    LoginPage,
    VerificationPage,
    ProfilePage,
    FacebookPage,
    ChatsOptionsComponent,
    NewChatComponent,
    MessagesOptionsComponent,
...some lines skipped...
    LoginPage,
    VerificationPage,
    ProfilePage,
    FacebookPage,
    ChatsOptionsComponent,
    NewChatComponent,
    MessagesOptionsComponent,
Improve this code

Now we can finally redirect to FacebookPage from VerificationPage and the Facebook account linking should be finally working:

17.15 Redirect to FacebookPage from the VerificationPage src/pages/verification/verification.ts 
1
2
3
4
5
6
7
 
43
44
45
46
47
48
49
import { AfterContentInit, Component, OnInit } from '@angular/core';
import { AlertController, NavController, NavParams } from 'ionic-angular';
import { PhoneService } from '../../services/phone';
import { FacebookPage } from "../login/facebook";
 
@Component({
  selector: 'verification',
...some lines skipped...
 
  verify(): void {
    this.phoneService.login(this.phone, this.code).then(() => {
      this.navCtrl.setRoot(FacebookPage, {}, {
        animate: true
      });
    })
Improve this code

It's time to fetch our name and profile picture from Facebook, as well as listing our Facebook friends who we want to chat with.

Let's start by adding the fb package:

$ npm install --save fb

Now we can create our server side Facebook service:

17.17 Create facebook Meteor service api/server/services/facebook.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import {Users} from "../collections/users";
import {FB} from "fb";
 
export interface FbProfile {
  name?: string;
  pictureUrl?: string;
};
 
export class FacebookService {
  private APP_ID: string = Meteor.settings.private.oAuth.facebook.appId;
  private APP_SECRET: string = Meteor.settings.private.oAuth.facebook.secret;
 
  constructor() {
  }
 
  async getAppToken(): Promise<string> {
    try {
      return (await FB.api(`/oauth/access_token?client_id=${this.APP_ID}&client_secret=${this.APP_SECRET}&grant_type=client_credentials`)).access_token;
    } catch (e) {
      throw new Meteor.Error('cannot-receive', 'Cannot get an app token');
    }
  }
 
//TODO: create a before.insert in the users collection to check if the token is valid
  async tokenIsValid(token: string): Promise<boolean> {
    try {
      return (await FB.api(`debug_token?input_token=${token}&access_token=${await this.getAppToken()}`)).data.is_valid;
    } catch (e) {
      console.error(e);
      return false;
    }
  }
 
// Useless because we already got a long lived token
  async getLongLivedToken(token: string): Promise<string> {
    try {
      return (await FB.api(`/oauth/access_token?grant_type=fb_exchange_token&client_id=${this.APP_ID}&client_secret=${this.APP_SECRET}&fb_exchange_token=${token}`)).access_token;
    } catch (e) {
      throw new Meteor.Error('cannot-receive', 'Cannot get a long lived token');
    }
  }
 
  async getAccessToken(user: string): Promise<string> {
    //TODO: check if token has expired, if so the user must login again
    try {
      const facebook = await Users.findOne(user).services.facebook;
      if (facebook.accessToken) {
        return facebook.accessToken;
      } else {
        throw new Error();
      }
    } catch (e) {
      throw new Meteor.Error('unauthorized', 'User must be logged-in with Facebook to call this method');
    }
  }
 
  async getFriends(accessToken: string, user?: string): Promise<any> {
    //TODO: check if more permissions are needed, if so user must login again
    try {
      const params: any = {
        //fields: 'id,name',
        limit: 5000
      };
      let friends: string[] = [];
      let result: any;
      const fb = FB.withAccessToken(accessToken);
 
      do {
        result = await fb.api(`/${user || 'me'}/friends`, params);
        friends = friends.concat(result.data);
        params.after = result.paging && result.paging.cursors && result.paging.cursors.after;
      } while (result.paging && result.paging.next);
 
      return friends;
    } catch (e) {
      console.error(e);
      throw new Meteor.Error('cannot-receive', 'Cannot get friends')
    }
  }
 
  async getProfile(accessToken: string, user?: string): Promise<FbProfile> {
    //TODO: check if more permissions are needed, if so user must login again
    try {
      const params: any = {
        fields: 'id,name,picture.width(800).height(800)'
      };
 
      let profile: FbProfile = {};
 
      const fb = FB.withAccessToken(accessToken);
      const result = await fb.api(`/${user || 'me'}`, params);
 
      profile.name = result.name;
      profile.pictureUrl = result.picture.data.url;
 
      return profile;
    } catch (e) {
      console.error(e);
      throw new Meteor.Error('cannot-receive', 'Cannot get profile')
    }
  }
}
 
export const facebookService = new FacebookService();
Improve this code

And the getFbProfile Meteor method:

17.18 Create getFbProfile Meteor method api/server/methods.ts 
4
5
6
7
8
9
10
 
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import { check, Match } from 'meteor/check';
import { Users } from "./collections/users";
import { fcmService } from "./services/fcm";
import { facebookService, FbProfile } from "./services/facebook";
 
const nonEmptyString = Match.Where((str) => {
  check(str, String);
...some lines skipped...
    check(token, nonEmptyString);
 
    Users.collection.update({_id: this.userId}, {$set: {"fcmToken": token}});
  },
  async getFbProfile(): Promise<FbProfile> {
    if (!this.userId) throw new Meteor.Error('unauthorized', 'User must be logged-in to call this method');
 
    if (!Users.collection.findOne({'_id': this.userId}).services.facebook) {
      throw new Meteor.Error('unauthorized', 'User must be logged-in with Facebook to call this method');
    }
 
    //TODO: handle error: token may be expired
    const accessToken = await facebookService.getAccessToken(this.userId);
    //TODO: handle error: user may have denied permissions
    return await facebookService.getProfile(accessToken);
  }
});
Improve this code

Finally we can update the FacebookPage to set the name and the picture from Facebook:

17.19 Update facebook.ts to set name and picture from Facebook src/pages/login/facebook.ts 
2
3
4
5
6
7
8
9
10
 
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Alert, AlertController, NavController } from "ionic-angular";
import { PhoneService } from "../../services/phone";
import { ProfilePage } from "../profile/profile";
import { MeteorObservable } from "meteor-rxjs";
import { FbProfile } from "api/services/facebook";
import { Profile } from "api/models";
 
@Component({
  selector: 'facebook',
...some lines skipped...
  linkFacebook(): void {
    this.phoneService.linkFacebook()
      .then(() => {
        MeteorObservable.call('getFbProfile').subscribe({
          next: (fbProfile: FbProfile) => {
            const pathname = (new URL(fbProfile.pictureUrl)).pathname;
            const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
            const description = {name: filename};
            let profile: Profile = {name: fbProfile.name, pictureId: ""};
            MeteorObservable.call('ufsImportURL', fbProfile.pictureUrl, description, 'pictures')
              .map((value) => profile.pictureId = (<any>value)._id)
              .switchMapTo(MeteorObservable.call('updateProfile', profile))
              .subscribe({
                next: () => {
                  this.navCtrl.setRoot(ProfilePage, {}, {
                    animate: true
                  });
                },
                error: (e: Error) => {
                  this.handleError(e);
                }
              });
          },
          error: (e: Error) => {
            this.handleError(e);
          }
        });
      })
      .catch((e) => {
Improve this code

To use promises inside publications we will install the promise Meteor package:

api$ meteor add promise

Now we can update the users publication to also publish Facebook friends:

17.21 Update users publication to publish Facebook friends api/server/publications.ts 
3
4
5
6
7
8
9
 
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
38
39
40
41
42
43
44
import { Messages } from './collections/messages';
import { Chats } from './collections/chats';
import { Pictures } from './collections/pictures';
import { facebookService } from "./services/facebook";
 
Meteor.publishComposite('users', function(
  pattern: string,
...some lines skipped...
 
  let selector = {};
 
  var facebookFriendsIds: string[] = [];
  if (Users.collection.findOne({'_id': this.userId}).services.facebook) {
    //FIXME: add definitions for the promise Meteor package
    //TODO: handle error: token may be expired
    const accessToken = (<any>Promise).await(facebookService.getAccessToken(this.userId));
    //TODO: handle error: user may have denied permissions
    const facebookFriends = (<any>Promise).await(facebookService.getFriends(accessToken));
    facebookFriendsIds = facebookFriends.map((friend) => friend.id);
  }
 
  if (pattern) {
    selector = {
      'profile.name': { $regex: pattern, $options: 'i' },
      $or: [
        {'phone.number': {$in: contacts}},
        {'services.facebook.id': {$in: facebookFriendsIds}},
        {'profile.name': {$in: ['Ethan Gonzalez', 'Bryan Wallace', 'Avery Stewart', 'Katie Peterson', 'Ray Edwards']}}
      ]
    };
...some lines skipped...
    selector = {
      $or: [
        {'phone.number': {$in: contacts}},
        {'services.facebook.id': {$in: facebookFriendsIds}},
        {'profile.name': {$in: ['Ethan Gonzalez', 'Bryan Wallace', 'Avery Stewart', 'Katie Peterson', 'Ray Edwards']}}
      ]
    }
Improve this code

Newest versions of the Facebook APIs don't allow to get a list of all the friends, you can simply get a list of friends who use your Facebook app. So in order to show them in the "New Chat" list they will need to do a Facebook login with our "Whatsapp Clone" application first.

To create test users you can also visit http://developers.facebook.com, select the Facebook app, then under roles there is a test users section where you can create test users. Unfortunately I fear that you will have to be the owner of the Facebook app in order to do so (or at lest be a tester), so you will probably need to create your own Facebook app. The procedure is pretty annoying anyway, because you will have to actually log in as each test user to be able to make them mutual friends.

navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial