firebase | blog.fossasia.org

Cloud Function For Sending Mail On Badge Generation in Badgeyay

Post author:yashLadha
Post published:August 26, 2018
Post category:FOSSASIA
Post comments:0 Comments

The task of badgeyay is to generate badges for events and if the user has provided a large data set, then the system will take time to generate badges and we cannot hold the user on the same page for that time. So instead of showing the user the link of the generated badge on the form, what we can do is that we can send a mail to user with the link of generated badge. However listening for the completion of generated badge from the cloud function is not possible, as cloud functions are based on serverless architecture. This can be done using the listeners for the realtime database events.

Generated badge from the backend will be uploaded to the Firebase Storage, but applying a listener for storage events, will not give us the information of the sender and some other metadata. So after uploading the link on the database, we can use the public link generated and can push a dict to the realtime database with the necessary user information for sending mail.

Procedure

Fetching the necessary information to be pushed on the Firebase realtime database.

def send_badge_mail(badgeId, userId, badgeLink):
  ref = firebase_db.reference(‘badgeMails’)
  print(‘Pushing badge generation mail to : ‘, badgeId)
  ref.child(userId).child(datetime.datetime.utcnow().isoformat().replace(‘-‘, ‘_’).replace(‘:’, ‘U’).replace(‘.’, ‘D’)).set({
      ‘badgeId’: badgeId,
      ‘badgeLink’: badgeLink
  })
  print(‘Pushed badge generation mail to : ‘, badgeId)

Payload consists of the downloadable link of the badge and the root node is the userID. So whenever any node gets created in this format them the cloud function will be called.

Listening for the database changes at the state of node.

exports.sendBadgeMail = functions.database.ref(‘/badgeMails/{userId}/{date}’)
.onCreate((snapshot, context) => {
  const payload = snapshot.val();
  const uid = context.params.userId;
  return admin.auth().getUser(uid)
    .then(record => {
      return sendBadgeGenMail(uid, record.email, record.displayName, payload[‘badgeId’], payload[‘badgeLink’]);
    })
    .catch(() => { return -1 });
});

For the realtime database listener, it should listen to node in the form of badgeMails/<user_id>/<date> as whenever a node of such form will be created in the database the function will get triggered and not for any other data insertions in db. This will save the quota for the cloud function execution.

Sending mail to the user from the payload

function sendBadgeGenMail(uid, email, displayName, badgeId, badgeLink) {
const mailOptions = {
  from: `${APP_NAME}<noreply@firebase.com>`,
  to: email,
};

mailOptions.subject = `Badge Generated ${badgeId}`;
mailOptions.html = `<p> Hello ${displayName || ”}! Your badge is generated successfully, please visit the <a href=${badgeLink}>link</a> to download badge</p>`;
return mailTransport.sendMail(mailOptions).then(() => {
  writeMailData(uid, “success”, 3);
  return console.log(‘Badge mail sent to: ‘, email)
}).catch((err) => {
  console.error(err.message);
  return -1;
});
}

This will send the mail to the user with the generated link.

Pull Request for the above feature at link : Link

Outcome:

Resources

Python Admin SDK for writing data to firebase – https://firebase.google.com/docs/database/admin/save-data
Extending realtime database with cloud function – https://firebase.google.com/docs/database/extend-with-functions
Managing users for getting details – https://firebase.google.com/docs/auth/admin/manage-users

Showing Mail Statistics Using Firebase In Badgeyay

Post author:yashLadha
Post published:August 26, 2018
Post category:FOSSASIA
Post comments:0 Comments

In this blog post I will show how we implemented mail statistics on the admin dashboard of Badgeyay. The problem is that we cannot send a request to an external API from firebase cloud functions in free plan and secondly we have to them bypass the call to realtime database and design a logic to sort out the details from the realtime database using python admin sdk. So, our approach in solving this is that we will use the realtime database with the cloud functions to store the data and using the firebase admin sdk will sort the entries and using binary search will count the statistics efficiently..

Procedure

Configuring the database URL in admin SDK

firebase_admin.initialize_app(cred, {
      ‘storageBucket’: ‘badgeyay-195bf.appspot.com’,
      ‘databaseURL’: ‘https://badgeyay-195bf.firebaseio.com’
  })

Write the mail data in realtime database using cloud function on promise resolvement

function writeMailData(uid, state, reason) {
if (state === ‘success’) {
  db.ref(‘mails’)
    .push()
    .set({

      …
    }, err => {
      …

});
}
}

Fetching the mail data from the realtime database in python admin sdk

def get_admin_stat():
mail_ref = firebasedb.reference(‘mails’)
mail_resp = mail_ref.get()

  …
  curr_date = datetime.datetime.utcnow()
  prev_month_date = curr_date – relativedelta(months=1)
  last_three_days_date = curr_date – relativedelta(days=3)
  last_seven_days_date = curr_date – relativedelta(days=7)
  last_day_date = curr_date – relativedelta(days=1)
  …

This will fetch the current date and them generates the relative dates in past. Then it filters out the data using a for loop and a comparison statement with the date to get the count of the mails. Those count is then passed into a dict and sent through schema.

Fetching the mail stats in admin index panel

mails : await this.get(‘store’).queryRecord(‘admin-stat-mail’, {})

Showing mails on the index page

class=“six wide column”>
          div class=“ui fluid center aligned segment”>
              h3 class=“ui left aligned header”>
                  Messages
              h3>
              div class=“ui divider”>div>
              h3 class=“ui header”>
                  No. of Sent Mails
              h3>
              table class=“ui celled table”>
                  tbody>
                      tr>
                          td> In last 24 hourstd>
                          td class=“right aligned”>
                              {{model.mails.lastDayCount}}
                          td>
                      tr>
                      tr>
                          td>In last 3 daystd>
                          td class=“right aligned”>
                              {{model.mails.lastThreeDays}}
                          td>
                      tr>
                      tr>
                          td> In last 7 days td>
                          td class=“right aligned”>
                              {{model.mails.lastSevenDays}}
                          td>
                      tr>
                      tr>
                          td> In last 1 month td>
                          td class=“right aligned”>
                              {{model.mails.lastMonth}}
                          td>
                      tr>
                  tbody>
              table>
          div>

PR to the issue: https://github.com/fossasia/badgeyay/pull/1163

Benefits of the approach

This approach is best in the case, when we only are using a subset of services firebase offers and do not want to pay for the services that are not required by the system.

Resources

Link to Issue – https://github.com/fossasia/badgeyay/issues/1136
Realtime database – https://firebase.google.com/docs/database/admin/save-data
Fetching the data from admin sdk in api – https://firebase.google.com/docs/database/admin/retrieve-data

Badges Search Functionality In Admin

Post author:yashLadha
Post published:August 21, 2018
Post category:Event Event Management FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is a badge generator service developed by FOSSASIA community for generating badges for conferences and events. Project is separated into frontend that is designed in EmberJS and backend that is created in Flask. Now The Badges tab in admin shows the total badges that are in the system. Along with different meta attributes like Badge creator name, date and other data. The main problem is that it doesn’t provide a way to search the badges from the admin panel. In this blog post i am going to explain about integrating badge search functionality in admin.

Procedure

Integrating form element for searching

class=“field”>

class=“ui action input”>
                          {{input type=“text” autocomplete=‘off’ value=user placeholder=“Search Badges…”}}

</div>
</form>

Main difficulty is to send the data to route components as we can’t pass the props, like we pass in components. The workaround is to send the query as route parameter.

findBadges() {
    var userTerm = this.get(‘user’);
    this.transitionToRoute(‘admin.badges.list’, userTerm);
  }

Extracting the query parameter and making request to backend

if (params.badge_status === ‘all’) {
    filter.state = ‘all’;
  } else if (params.badge_status === ‘created’) {
    filter.state = ‘created’;
  } else if (params.badge_status === ‘deleted’) {
    filter.state = ‘deleted’;
  } else {
    filter.filter = params.badge_status;
  }

Creating query in controller to fetch the data for the same.

if ‘filter’ in args.keys():
      badges = base_query.filter(User.username.contains(args[‘filter’]))
      badges = badges.paginate(page, app.config[‘POSTS_PER_PAGE’], False)
      schema = AdminBadgeSchema(many=True)
      return jsonify(schema.dump(badges.items).data)

Resources

Flask Sqlalchemy documentation for query – Link
Pull Request for the same – Link
Ember Guide – Link

Forgot Password Service in Badgeyay

Post author:yashLadha
Post published:August 21, 2018
Post category:Event Event Management FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is an open source badge generator service for generating badges developed by FOSSASIA community for technical events and conferences. The project is divided into two components mainly frontend and backend. After creating the user registration functionality in application, if the user forgets the credentials for the login, then there must be a way to recreate the credentials using a secure channel. This is only valid for the users signed up through email login as for the case of OAuth they must have access to their ID on respective social platform. The main challenges in resetting password for the user is to provide a secure channel. So the problem can be breakdown into following issues:

Creating a token for reset action
Sending that token via mail to user
Verifying that token on the server and giving access
Changing the credentials of the user

Procedure

Generating token for the request to change credentials for the user. The token will be an expiry token and will be expired in the mentioned duration. So the token is valid for only a limited period of time and will prevent fraudulent requests.

def pwd_reset_token():
  data = request.get_json()[‘data’][‘attributes’]
  if ’email’ not in data.keys():
      print(‘Email not found’)
  email = data[’email’]
  user = User.getUser(email=email)
  if not user:
      return ErrorResponse(UserNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
  expire = datetime.datetime.utcnow() + datetime.timedelta(seconds=900)
  token = jwt.encode({
      ‘id’: user.id,
      ‘exp’: expire
  }, app.config.get(‘SECRET_KEY’))
  resetObj = ResetPasswordToken(user.id, token.decode(‘UTF-8’))
  resetObj.save_to_db()
  return jsonify(TokenSchema().dump(resetObj).data)

Model for ResetPasswordToken

class ResetPasswordToken(db.Model):

  __tablename__ = ‘Reset Password Token’

  id = db.Column(db.String, primary_key=True)
  token = db.Column(db.String, nullable=False)

  def __init__(self, uid, token):
      self.id = uid
      self.token = token

  def save_to_db(self):
      try:
          db.session.add(self)
          db.session.commit()
      except Exception as e:
          db.session.rollback()
          db.session.flush()
          print(e)

Sending the password reset link via mail to the user. The link will contain the token (expiry token) that will be used to validate the request. For the case we will be using Firebase Cloud functions as an HTTP Trigger.

exports.sendResetMail = functions.https.onRequest((req, res) => {
let token = req.query[‘token’];
let email = req.query[’email’];
res.setHeader(‘Content-Type’, ‘application/json’);
sendResetMail(token, email)
  .then(() => {
    console.log(‘Reset mail sent to’, email);
    res.json({ data: { attributes: { status: 200 }, id: token, type: ‘reset-mails’ } });
    return 0;
  })
  .catch(err => {
    console.error(err);
    res.json({ data: { attributes: { status: 500 }, id: token, type: ‘reset-mails’ } });
    return -1;
  });
});

function sendResetMail(token, email) {
const mailOptions = {
  from: `${APP_NAME}<noreply@firebase.com>`,
  to: email,
};

mailOptions.subject = `Password reset link`;
mailOptions.html = ‘<p>Hey ‘ + email + ‘! Here is your password reset <a href=\” + PASSWORD_RESET_LINK
  + token + ‘\’>Link</a><p>’;
return mailTransport.sendMail(mailOptions);
}

Verifying the token on the server side to validate the user request

def validate_reset_token():
  args = request.args
  if ‘token’ in args.keys():
      token = args.get(‘token’)
  resp = {‘id’: token}
  try:
      jwt.decode(token, app.config[‘SECRET_KEY’])
      resp[‘valid’] = True
      return jsonify(ValidTokenSchema().dump(resp).data)
  except Exception as e:
      resp[‘valid’] = False
      print(e)
      return jsonify(ValidTokenSchema().dump(resp).data)

After user has access to change the credentials, then user can send a POST request to backend through a form shown in UI to change its password.

def changePwd():
  try:
      data = request.get_json()[‘data’][‘attributes’]
  except Exception as e:
      print(e)
      return ErrorResponse(PayloadNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  token = data[‘token’]
  try:
      decoded_res = jwt.decode(token, app.config[‘SECRET_KEY’])
  except Exception as e:
      print(e)
      return ErrorResponse(SignatureExpired().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  user = User.getUser(user_id=decoded_res[‘id’])

  if ‘pwd’ not in data.keys():
      return ErrorResponse(PasswordNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  pwd = data[‘pwd’]
  oldPwd = user.password
  user.password = generate_password_hash(pwd)
  user.save_to_db()

  resp = {‘id’: token}
  if update_firebase_password(user.id, pwd):
      resp[‘status’] = ‘Changed’
      return jsonify(ResetPasswordOperation().dump(resp).data)
  else:
      print(‘Firebase not uploaded’)
      user.password = oldPwd
      user.save_to_db()
      resp[‘status’] = ‘Not Changed’
      return jsonify(ResetPasswordOperation().dump(resp).data)

After this the password of the user will be changed and allowed to login through new credentials.

Link to PRs:

PR for forgot password reset form – #1
PR for implementing forgot password on firebase side – #2
PR for password reset mail functionality – #3

Resources

HTTP Trigger Cloud functions – Link
Nodemailer message configuration – Link
Ember Data Guide – Link

Metadata Updation in Badgeyay

Post author:yashLadha
Post published:August 21, 2018
Post category:Event Event Management FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is a simple badge generator service to develop badges for technical events and conferences developed by FOSSASIA. Badgeyay is a SPA (Single Page Application) developed in ember, whose backend is in Flask. Now when user logins, he can see an option for user profile, in which all the metadata of its profile can be seen (extracted from Firebase). Now user should be able to change its metadata like profile image and username etc. So we will look how the profile image is being changed and updated in badgeyay.

Procedure

Create function in frontend to listen for onclick events and initiate a file upload dialog box for selecting an image. We will use document property to initiate a dummy click event, else there will be a button with the text to upload a file and that won’t look consistent as we only need an image and nothing else on the UI.

class=“ui small circular image profile-image”>

“{{user.photoURL}}”>
“display: none;” id=“profileImageSelector” type=“file” onchange={{action “profileImageSelected”}}>

“profile-change” onclick={{action “updateProfileImage”}}>Change

</div>

Function to upload file and initiate a dummy click event

updateProfileImage() {
    // Initate a dummy click event
    document.getElementById(‘profileImageSelector’).click();
  },

  profileImageSelected(event) {
    const reader = new FileReader();
    const { target } = event;
    const { files } = target;
    const [file] = files;
    const _this = this;

    reader.onload = () => {
      _this.get(‘sendProfileImage’)(reader.result, file.type.split(‘/’)[1]);
    };

    reader.readAsDataURL(file);
  }

Profile update function in the main controller to call the API endpoint to upload the data to backend. This will send the payload to backend which will later upload the image to cloud storage and save in the link in the database.

updateProfileImage(profileImageData, extension) {
    const _this = this;
    const user = this.get(‘store’).peekAll(‘user’);
    user.forEach(user_ => {
      _this.set(‘uid’, user_.get(‘id’));
    });
    let profileImage = _this.get(‘store’).createRecord(‘profile-image’, {
      image   : profileImageData,
      uid   : _this.uid,
      extension : ‘.’ + extension
    });
    profileImage.save()
      .then(record => {
        user.forEach(user_ => {
          user_.set(‘photoURL’, record.photoURL);
        });
      })
      .catch(err => {
        let userErrors = profileImage.get(‘errors.user’);
        if (userErrors !== undefined) {
          _this.set(‘userError’, userErrors);
        }
      });
  }

Route to update profile image from backend

@router.route(‘/profileImage’, methods=[‘POST’])
def update_profile_image():
  try:
      data = request.get_json()[‘data’][‘attributes’]
  except Exception:
      return ErrorResponse(PayloadNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  if not data[‘image’]:
      return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  if not data[‘extension’]:
      return ErrorResponse(ExtensionNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  uid = data[‘uid’]
  image = data[‘image’]
  extension = data[‘extension’]

  try:
      imageName = saveToImage(imageFile=image, extension=extension)
  except Exception:
      return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

  fetch_user, imageLink = update_database(uid, imageName)
  return jsonify(UpdateUserSchema().dump(fetch_user).data)

This will first create a temp file with the data URI and them upload that file to cloud storage and generate the link and then update the user in the database.

def update_database(uid, imageName):
  fetch_user = User.getUser(user_id=uid)
  if fetch_user is None:
      return ErrorResponse(UserNotFound(uid).message, 422, {‘Content-Type’: ‘application/json’}).respond()
  imagePath = os.path.join(app.config.get(‘BASE_DIR’), ‘static’, ‘uploads’, ‘image’) + ‘/’ + imageName
  imageLink = fileUploader(imagePath, ‘profile/images/’ + imageName)
  fetch_user.photoURL = imageLink
  fetch_user.save_to_db()

  try:
      os.unlink(imagePath)
  except Exception:
      print(‘Unable to delete the temporary file’)

  return fetch_user, imageLink

Link to PR – Link

Topics Involved

Google Cloud Admin Storage SDK
Ember data

Resources

Firebase admin sdk documentation – Link
Google Cloud Storage SDK Python – Link
Blob Management – Link
Documents API – Link

Uploading Badges To Google Cloud Badgeyay

Post author:yashLadha
Post published:August 21, 2018
Post category:Event Event Management FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is an open source project developed by FOSSASIA community. This project mainly aims for generating badges for technical conferences and events.The project is divided into two parts mainly. Backend is developed in flask and frontend is developed in emberjs. The problem is after the badge generation, the flask server is storing and serving those files. In practise this is not a good convention to do so. This should be handled by secondary hosting server program like gunicorn or nginx. Better approach would be to consume the firebase storage and admin sdk for storing the badges on google cloud. This will also offload storage needs from the flask server and also give a public link over the network to access.

Procedure

Get the file path of the temporary badge generated on the flask server. Currently badges are saved in the directory of the image file uploaded and final badge generated is written in all-badges.pdf`

badgePath = os.getcwd() + ‘/static/temporary/’ + badgeFolder
badgePath + ‘/all-badges.pdf’

Create the blob path for the storage. Blob can be understood as the final reference to the location where the contents are saved onto the server. This can be a nested directory structure or simply a filename in root directory.

‘badges/’ + badge_created.id + ‘.pdf’

In our case it is the id of the badge that is generated in the badges directory.

Function for uploading the file generated in temporary storage to google cloud storage.

def fileUploader(file_path, blob_path):
  bucket = storage.bucket()
  fileUploaderBlob = bucket.blob(blob_path)
  try:
      with open(file_path, ‘rb’) as file_:
          fileUploaderBlob.upload_from_file(file_)
  except Exception as e:
      print(e)
  fileUploaderBlob.make_public()
  return fileUploaderBlob.public_url

It creates a bucket using the firebase admin SDK and then open the file from the file path. After opening the file from the path it writes the data to the cloud storage. After the data is written, the blob is made public and the public access link to the blob is fetched, which then later returned and saved in the local database.

Topics Involved

Firebase admin sdk for storage
Google cloud storage sdk

Resources

Firebase admin sdk documentation – Link
Google Cloud Storage SDK Python – Link
Blob Management – Link

Integrating Firebase Cloud Functions In Badgeyay

Post author:yashLadha
Post published:August 21, 2018
Post category:Event Event Management FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is an open source project developed by FOSSASIA Community for generating badges for conferences and events. The Project is divided into two parts frontend, which is in ember, and backend, which is in flask. Backend uses firebase admin SDK (Python) and Frontend uses firebase javascript client with emberfire wrapper for ember. Whenever an user signs up on the website, database listener that is attached to to the Model gets triggered and uses flask-mail for sending welcome mail to the user and in case of email and password signup, verification mail as well.

Problem is sending mail using libraries is a synchronous process and takes a lot of processing on the server. We can use messaging queues like RabbitMQ and Redis but that will be burden as server cost will increase. The workaround is to remove the code from the server and create a firebase cloud function for the same task.

Firebase cloud functions lets you run backend code on the cloud and can be triggered with HTTP events or listen for the events on the cloud, like user registration.

Procedure

Firebase uses our Gmail ID for login, so make sure to have a Gmail ID and on the first sight we will be greeted with Firebase console, where we can see our created or imported firebase apps.
Create the app by clicking on the Add Project Icon and write the name of the application (e.g. Test Application) and select the region, in my case it is India. Firebase will automatically generated an application ID for the app. Click on Create Project to complete creation of project
After Completion, click on the project to enter into the project. You will be greeted with an overview saying to integrate firebase with your project. We will click on the Add Firebase to web App and save the config as JSON in a file as clientKey.json for later use.

Now we need to install the firebase tools on our local machine so for that execute

npm i -g firebase-tools

Now login from the CLI so that firebase gets token for the Gmail ID of the user and can access the firebase account of that Gmail ID.

firebase login

After giving permissions to the firebase CLI from your Gmail account in the new tab opened in browser, create a folder named cloud_functions in the project directory and in that execute

firebase init

Select only functions from the list of options by pressing space.
After this select the project from the list where you want to use the cloud function. You can skip the step if you later want to add the cloud function to project by selecting don’t setup a default project and can later be used by command

firebase use –add
Choose the language of choice
If you want, you can enforce eslint on the project and after this the cloud function is set up and the directory structure looks as follows.

We will write our cloud function in index.js. So let’s take a look at index.js

const functions = require(‘firebase-functions’);

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
// response.send(“Hello from Firebase!”);
// });

As we can see there is a sample function already given, we don’t need that sample function so we will remove it and will write the logic for sending mail. Before that we need to acquire the key for service accounts so that admin functionality can be accessed in the cloud function. So for that go to project settings and then service accounts and click on Generate New Private Key and save it as serviceKey.json

Now the directory structure will look like this after adding the clientKey.json and serviceKey.json

We will use node-mailer for sending mails in cloud functions and as there is a limitation on the gmail account to send only 500 mails in a day, we can use third party services like sendGrid and others for sending mails with firebase. Configure node-mailer for sending mails as

const nodemailer = require(‘nodemailer’);

const gmailEmail = functions.config().gmail.email;
const gmailPassword = functions.config().gmail.password;
const mailTransport = nodemailer.createTransport({
service: ‘gmail’,
auth: {
user: gmailEmail,
pass: gmailPassword
}
});

Also set the environment variables for the cloud functions like email and password:

firebase functions:config:set gmail.email=“Email ID” gmail.password=“Password”

Logic for sending Greeting Mail on user registration

exports.greetingMail = functions.auth.user().onCreate((user) => {
const email = user.email;
const displayName = user.displayName;

return sendGreetingMail(email, displayName);
});

function sendGreetingMail(email, displayName) {
const mailOptions = {
from: `${APP_NAME}<noreply@firebase.com>`,
to: email,
};

mailOptions.subject = `Welcome to Badgeyay`;
mailOptions.text = `Hey ${displayName || ”}! Welcome to Badgeyay. We welcome you onboard and pleased to offer you service.`;
return mailTransport.sendMail(mailOptions).then(() => {
return console.log(‘Welcome mail sent to: ‘, email)
}).catch((err) => {
console.error(err.message);
});
}

Function will get triggered on creation of user in firebase and calls the greeting mail function with parameters as the email id of the registered user and the Display name. Then a default template is used to send mail to the recipient and Logged on successful submission.

Currently firebase admin sdk doesn’t support the functionality to send verification mail but the client SDK does. So the approach which is followed in badgeyay is that admin SDK will create a custom token and client sdk will use that custom token to sign in and them send verification mail to the user.

exports.sendVerificationMail = functions.auth.user().onCreate((user) => {
const uid = user.uid;
if (user.emailVerified) {
console.log(‘User has email already verified: ‘, user.email);
return 0;
} else {
return admin.auth().createCustomToken(uid)
.then((customToken) => {
    return firebase.auth().signInWithCustomToken(customToken)
})
.then((curUser) => {
    return firebase.auth().onAuthStateChanged((user_) => {
      if (!user.emailVerified) {
        user_.sendEmailVerification();
        return console.log(‘Verification mail sent: ‘, user_.email);
      } else {
        return console.log(‘Email is already verified: ‘, user_.email);
      }
    })
})
.catch((err) => {
    console.error(err.message);
})
}
});

Now we need to deploy the functions to firebase.

firebase deploy –only functions

Link to the respective PR : Link

Topics Involved

Firebase Admin SDK
Configuring Gmail for third party apps
Token Verification and verification mail by client SDK
Nodemailer and Express.js

Resources

Firebase Cloud functions – Link
Extending authentication with cloud function – Link
Custom Token Verification – Link
Nodemailer message configuration – Link
Issue discussion on sending verification mail with admin SDK – Link

Configuring Firebase in Loklak Search

Post author:simsausaurabh
Post published:July 6, 2018
Post category:FOSSASIA GSoC loklak
Post comments:0 Comments

In process of expanding features of loklak to provide support of twitter api to the users, it was a good idea to go with Firebase as the managing medium for logged in or authenticated users. After integration of Firebase into loklak, users will be able to authenticate themselves securely with Facebook, Google, and Twitter and get access to the results from Twitter api on loklak. In this blog post, I will be discussing the Firebase configuration process into loklak.

Setting up Firebase environment configuration

Without explicitly going into each single detail of the integration process which is already provided by Firebase and other mediums, I will jump on to the main key characteristics of configuring Firebase into Loklak. This step covers the configuration of Firebase environment parameters. Goto Firebase console and copy the project’s environment’s parameters for web app option and paste it into environments/environment.ts file inside the project as given below by replacing all ‘*’ with the required values.

export const environment = {
    production: true,
    firebase: {
    apiKey: ‘***’,
    authDomain: ‘***’,
    databaseURL: ‘***’,
    projectId: ‘***’,
    storageBucket: ‘***’,
    messagingSenderId: ‘***’
    }
};

Initialise the Firebase app

Next step would be to cover establish the Firebase app in app.module.ts by importing necessary packages as given below.

import { AngularFireModule } from ‘angularfire2’;
import { AngularFirestoreModule } from ‘angularfire2/firestore’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;
import { environment } from ‘../environments/environment’; 

...
imports: [
  …
  AngularFireModule.initializeApp(environment.firebase,
    ‘loklak-search’),
  AngularFirestoreModule,
  AngularFireAuthModule
]

Creating Auth service with various Auth providers

This is the main part of the Firebase configuration. Create a new Auth service in ‘services/’, and include the given below methods for providing authentication using – Twitter, Facebook, Google, and Email & Password. We will also provide logout feature for the user to log out from the current service provider. Given below is an example of adding Google as the service provider for authentication, it can be similarly used to provider authentication for other providers.

import { Injectable } from ‘@angular/core’;
import { AngularFireAuth } from ‘angularfire2/auth’;
import { Observable } from ‘rxjs’;
import * as firebase from ‘firebase/app’;

@Injectable()
export class AuthService {

    public authState: Observable<firebase.User>;
    constructor( private afAuth: AngularFireAuth ) {
        this.authState = this.afAuth.authState;
    }

    signInWithGoogle() {
        return this.afAuth.auth.signInWithPopup(
            new firebase.auth.GoogleAuthProvider()
        );
    }

    logout() {
        this.afAuth.auth.signOut();
    }
}

We are using AngularFireAuth to provide authentication for every provider.

Using Auth service in the required component

This step would cover up the last portion to use the auth service to actually provide authenticated login. Now, import the created auth service and other packages and create a property of auth service and a user variable to keep check on the current user status (We would store the current status on the constructor call).

import { AuthService } 
    from ‘./../services/auth.service’;
import * as firebase from ‘firebase/app’;
…
public user: Observable<firebase.User>;
    constructor(
        private _eref: ElementRef,
        private afAuth: AuthService
    ) {
        this.user = this.afAuth.authState;
    }

Now, call the methods of auth service and storing the status of current user in the user property created above (For an example, calling only twitter auth and logout method).

signInWithTwitter() {
    this.afAuth.signInWithTwitter();
}
logout() {
    this.afAuth.logout();
}

These methods could now be easily called inside (click) property of any appropriate html div/tag to provide login or logout feature.

Testing Auth Login

Click on the div/tag which is calling the SignIn methods and look onto the console for results.

Resources

Firebase: Getting Started
Firebase: Firebase Authentication Providers
ITNEXT: Firebase Authentication

Integrating Firebase Cloud Functions In Badgeyay

Post author:yashLadha
Post published:June 21, 2018
Post category:FOSSASIA GSoC
Post comments:0 Comments

Badgeyay is an open source project developed by FOSSASIA Community for generating badges for conferences and events. The Project is divided into two parts frontend, which is in ember, and backend, which is in flask. Backend uses firebase admin SDK (Python) and Frontend uses firebase javascript client with emberfire wrapper for ember. Whenever an user signs up on the website, database listener that is attached to to the Model gets triggered and uses flask-mail for sending welcome mail to the user and in case of email and password signup, verification mail as well.

Problem is sending mail using libraries is a synchronous process and takes a lot of processing on the server. We can use messaging queues like RabbitMQ and Redis but that will be burden as server cost will increase. The workaround is to remove the code from the server and create a firebase cloud function for the same task.

Firebase cloud functions lets you run backend code on the cloud and can be triggered with HTTP events or listen for the events on the cloud, like user registration.

Procedure

Firebase uses our Gmail ID for login, so make sure to have a Gmail ID and on the first sight we will be greeted with Firebase console, where we can see our created or imported firebase apps.

Create the app by clicking on the Add Project Icon and write the name of the application (e.g. Test Application) and select the region, in my case it is India. Firebase will automatically generated an application ID for the app. Click on Create Project to complete creation of project
After Completion, click on the project to enter into the project. You will be greeted with an overview saying to integrate firebase with your project. We will click on the Add Firebase to web App and save the config as JSON in a file as clientKey.json for later use.

Now we need to install the firebase tools on our local machine so for that execute

npm i -g firebase-tools

Now login from the CLI so that firebase gets token for the Gmail ID of the user and can access the firebase account of that Gmail ID.

firebase login

After giving permissions to the firebase CLI from your Gmail account in the new tab opened in browser, create a folder named cloud_functions in the project directory and in that execute

firebase init

Select only functions from the list of options by pressing space.
After this select the project from the list where you want to use the cloud function. You can skip the step if you later want to add the cloud function to project by selecting don’t setup a default project and can later be used by command

firebase use --add

Choose the language of choice
If you want, you can enforce eslint on the project and after this the cloud function is set up and the directory structure looks as follows.
We will write our cloud function in index.js. So let’s take a look at index.js

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
// response.send("Hello from Firebase!");
// });

As we can see there is a sample function already given, we don’t need that sample function so we will remove it and will write the logic for sending mail. Before that we need to acquire the key for service accounts so that admin functionality can be accessed in the cloud function. So for that go to project settings and then service accounts and click on Generate New Private Key and save it as serviceKey.json

Now the directory structure will look like this after adding the clientKey.json and serviceKey.json
We will use node-mailer for sending mails in cloud functions and as there is a limitation on the gmail account to send only 500 mails in a day, we can use third party services like sendGrid and others for sending mails with firebase. Configure node-mailer for sending mails as

const nodemailer = require('nodemailer');

const gmailEmail = functions.config().gmail.email;
const gmailPassword = functions.config().gmail.password;
const mailTransport = nodemailer.createTransport({
service: 'gmail',
auth: {
user: gmailEmail,
pass: gmailPassword
}
});

Also set the environment variables for the cloud functions like email and password:

firebase functions:config:set gmail.email="Email ID" gmail.password="Password"

Logic for sending Greeting Mail on user registration

exports.greetingMail = functions.auth.user().onCreate((user) => {
const email = user.email;
const displayName = user.displayName;

return sendGreetingMail(email, displayName);
});

function sendGreetingMail(email, displayName) {
const mailOptions = {
from: `${APP_NAME}<noreply@firebase.com>`,
to: email,
};

mailOptions.subject = `Welcome to Badgeyay`;
mailOptions.text = `Hey ${displayName || ''}! Welcome to Badgeyay. We welcome you onboard and pleased to offer you service.`;
return mailTransport.sendMail(mailOptions).then(() => {
return console.log('Welcome mail sent to: ', email)
}).catch((err) => {
console.error(err.message);
});
}

Function will get triggered on creation of user in firebase and calls the greeting mail function with parameters as the email id of the registered user and the Display name. Then a default template is used to send mail to the recipient and Logged on successful submission.

Currently firebase admin sdk doesn’t support the functionality to send verification mail but the client SDK does. So the approach which is followed in badgeyay is that admin SDK will create a custom token and client sdk will use that custom token to sign in and them send verification mail to the user.

exports.sendVerificationMail = functions.auth.user().onCreate((user) => {
const uid = user.uid;
if (user.emailVerified) {
console.log('User has email already verified: ', user.email);
return 0;
} else {
return admin.auth().createCustomToken(uid)
.then((customToken) => {
return firebase.auth().signInWithCustomToken(customToken)
})
.then((curUser) => {
return firebase.auth().onAuthStateChanged((user_) => {
if (!user.emailVerified) {
user_.sendEmailVerification();
return console.log('Verification mail sent: ', user_.email);
} else {
return console.log('Email is already verified: ', user_.email);
}
})
})
.catch((err) => {
console.error(err.message);
})
}
});

Now we need to deploy the functions to firebase.

firebase deploy --only functions

Link to the respective PR : Link

Topics Involved

Firebase Admin SDK
Configuring Gmail for third party apps
Token Verification and verification mail by client SDK
Nodemailer and Express.js

Resources

Firebase Cloud functions – Link
Extending authentication with cloud function – Link
Custom Token Verification – Link
Nodemailer message configuration – Link
Issue discussion on sending verification mail with admin SDK – Link

Hosting SUSI.AI Web Chat on Firebase

Post author:Arundhati Gupta
Post published:June 20, 2018
Post category:FOSSASIA GSoC SUSI.AI
Post comments:0 Comments

“I often wonder if my smartphone or laptop could become a bit smarter… And, I could talk to it the way I talk to my best friend… Wouldn’t that be cool if I could customise my phone’s assistant and enhance its ‘personality’ whenever I want? Or maybe ‘teach it a little more than others to make its intelligence outshine other students in its class?’ Well, that’s what we aim to achieve in the name of SUSI.AI”

Currently, SUSI.AI is in its growing stage and a number of dedicated developers have been working hard to achieve an open source alternative to existing personal assistants like Google Assistant, Alexa and so on. Each one of them has been focussing on improving existing features or introducing new ones.

This blog focuses on hosting the SUSI Webchat using Firebase Hosting. It presents the proper sequence of steps that need to be followed to deploy the web chat on Firebase Hosting.

What is Firebase Hosting?

Firebase Hosting provides fast and secure static hosting for web app. It is a production-grade web content hosting for developers. With Hosting, one can quickly and easily deploy web apps and static content to a global content-delivery network (CDN) with a single command.

Hosting gives a project a subdomain on the ‘firebaseapp.com’ domain. Using the Firebase CLI, the files can be deployed from local directories on a computer to the Hosting server. Files are served over an SSL connection from the closest edge server on the global CDN.

Steps :

Install the Firebase CLI

The Firebase CLI (Command Line Interface) requires Node.js and npm, which can both be installed by following the instructions on https://nodejs.org/. Installing Node.js also installs npm.

Note : The Firebase CLI requires Node.js version 5.10.0 or greater.

Once Node.js and npm have been installed, install the Firebase CLI via npm:

$ npm install -g firebase-tools

This installs the globally available firebase command. To update to the latest version, simply re-run the same command.

Now login to the Firebase console using

$ firebase login

Initialize the app

Choose the Firebase app that you would like to deploy and then cd into the project directory and run the command:

$ firebase init

Once this command runs, you would be prompted to choose from the following options :

Database: Deploy Firebase Realtime Database Rules
Firestore: Deploy rules and create indexes for Firestore
Functions: Configure and deploy Cloud Functions
Hosting: Configure and deploy Firebase Hosting sites
Storage: Deploy Cloud Storage security rules

Choose Hosting (use the cursor keys to move the pointer to ‘Hosting’ and then select it by pressing Spacebar key followed by the Enter key).

Now, you would be prompted to select a project from the Firebase console that you would like to associate with the web chat. You can create a new project by logging into the Firebase console from a web browser and then follow the steps below :

1) If you don’t have an existing Firebase project, click ‘Add Project’ and enter either an existing Google Cloud Platform project name or a new project name.

2) If you already have apps in your project, click ‘Add Another App’ from the project overview page.

Running the $ firebase init command creates a firebase.json settings file in the root of your project directory.

Add a file

When you initialise the app, you will be prompted for a directory to use as the public root (default is “public”). You can choose to give it some other name as well, say “build”. This is the directory in which the static content would be hosted. If you don’t already have a valid index.html file in your public root directory, one is created for you.

Note : When a new index.html file is created, it contains the default content. You need to run the following commands to customise it according to your requirements and to display the content that you want to.

$ npm install
$ npm run build

If you skip running these commands, on deploying you will see a dialog box, by default, that would direct you to the Firebase Hosting Documentation.

Test on Local Server

Now you can run the $ firebase serve command to test your web app on a local server. Once, everything looks fine, you can proceed to the next step.

Deploy the web app on Firebase

To deploy the web app, simply run:

$ firebase deploy

Your app will be deployed to the domain
<OUR-FIREBASE-APP>.firebaseapp.com

Manage and Rollback Deploys

From the Hosting panel in the Firebase Console you can see a full history of your deploys. To rollback to a previous deploy, hover over its entry in the list, click the overflow menu icon, then click “Rollback”.
Now your app is ready to share with the world! 😀

Check out a video created by me, showing the above mentioned steps : Click here

Resources

Documentation – Firebase Hosting: https://firebase.google.com/docs/hosting/#top_of_page
Customize Hosting Behaviour: https://firebase.google.com/docs/hosting/url-redirects-rewrites
Link to SUSI.AI Webchat repository: https://github.com/fossasia/chat.susi.ai