Waaave: A Technology Company That Connects Developers

Waaave is a technology company that connects developers.
Share your knowledge, learn cool new stuff and get recognized in your expertise domain.

We envision:

• A world where knowledge is free and shared with others.
• A world where people who work hard get rewarded for helping others and giving time.
• A world where individuals and technology companies are connected in a deeper way.

Our mission is to empower people and create connections. Develop talents and help everyone act to make the world a better place through technology.

This is Waaave, a work still in progress. Designed by Julien Le Coupanec, Valérian Saliou and Anthony Peron.

 

Playing with the Instagram API Authentication

By: Julien Le Coupanec
Meteor Developer
Paris, FR.

Instagram is an amazing photo-sharing application that allows users to take a picture and apply a digital filter on it. The service is now used by more than 100 million users around the world and has been purchased by Facebook in 

April 2012 for 1 billion in cash. With its huge database of pictures (the total number of photographs uploaded had exceeded one billion for the anecdote), needless to say that with your imagination you can build some interesting platforms by only using the Instagram API.

Through this article, I will only talk about the authentication process so as to login a user and retrieve some information about him like his username, his profile picture and of course his photos. I will keep it as simple as possible and will try to explain the process step by step.

Check the Instagram documentation if you need to go further.

Step 1: Register Your Application.

The first thing you need to do to enjoy the benefits of Instagram is to register your application. This will be a matter of seconds. Click on the green button Register a New Client and fill out the form as below.

You should get a message indicating that your application has been successfully registered.

After being redirected, you will see a new blue box containing your client ID, your client secret, your website URL and your redirect URI. This information is very important and we will use it for the authentication process.
 

Step 2: The Authentication Process.

1: The Authentication URL.

For retrieving data from the user, the Instagram API requires a client_id and an access_token. The authentication process has for main goal to provide you this information so as that you can communicate with the rest of their API. Keep in mind that these tokens are unique to a user, may expire at any time in the future and should be stored securely.

Note: In many situations, you may not need to authenticate users at all. For instance, you may request popular photos without authenticating (i.e. you do not need to provide an access_token; just use your client ID with your request). We only require authentication in cases where your application is making requests on behalf of a user (commenting, liking, browsing a user’s feed, etc.).

In order to receive an access token, you must direct the user to your authorization url.

• If the user is not logged in, they will be asked to log in.
• The user will be asked if they’d like to give your application access to his/her Instagram data.

Then, the server will redirect the user in one of two ways that you choose:

• Server-side flow (recommended): Redirect the user to a URI of your choice. Take the provided code parameter and exchange it for an access_token by posting the code to our access_token url.
• Implicit flow: Instead of handling a code, they include the access_token as a fragment (#) in the URL. This method allows applications without any server component to receive an access_token with ease. I won't talk about it. Please, go to link the documentation to learn about it.

The primary step is to direct your user to your authorization URL so as to retrieve the code that will help us to get the authentication_token. Here is the shape of your URL. Make sure to change the client id and your redirect URI with your own informations:

By clicking on this link, the users should obtain a login screen and then a confirmation screen where they approve your app’s access to his/her Instagram data. So as to make it as simple as possible, create a new html page, place the following link and be sure to have your MAMP or any other servers open behind it.

Note: Your redirect URI’s host and path MUST match exactly (including trailing slashes) to your registered redirect_uri>. You may also include additional query parameters in the supplied redirect_uri, if you need to vary your behavior dynamically.

If your request for approval is denied by the user, then we will redirect the user to your redirect_uri with the following parameters:
error: access_denied
error_reason: user_denied
error_description: The user denied your request

It is your responsibility to fail gracefully in this situation and display a corresponding error message to your user.

2: Request the access_token.

To retrieve the access_token, we will use use the code parameter with the help of PHP and curl.

If successful, this call will return a neatly packaged OAuth Token that you can use to make authenticated calls to the API. The API also include the user who just authenticated for your convenience:

Note: Instagram does not include an expiry time. Their access tokens have no explicit expiry, though your app should handle the case that either the user revokes access or they expire the token after some period of time. In this case, your response’s meta will contain an “error_type=OAuthAccessTokenError”>. In other words: do do not assume your access_token is valid forever.

3: Retrieve the user's photos.

To retrieve the last user's photos, you have to call a url provided by the API with curl and save the json result in a variable as shown below. Don't forget to replace the user id and the access_token. Here is the final php code.

***********

Design a Complete Authentication System with Meteor.

By: Julien Le Coupanec
Meteor Developer
Paris, FR.

Spending time on an authentication system when you are excited about a new idea is kind of boring. What you want is to be efficient and start coding the main features of your product without worrying about the way your users are going to sign up, sign in or sign out. Fortunately, Meteor is here to save you.

1. An overlook about what we are going to achieve.

We want to understand the main principles on how to help our users to authenticate with Meteor. We also want to build a fast and robust solution to focus as much as possible on the core part of our application. Here are the four features we're going to implement.
 

1. Visitors will be able to register. If successful, they will be automatically logged in. Otherwise, we'll send them a message to explain what went wrong.
2. Registered users will be able to sign in with their email and their password.
3. Logged users will be able to sign out.
4. And finally, distracted users will be able to change their password by typing their email and checking the link sent in their mailbox.

2. Let's get started.

2.1. Installing the Account-Password Module.

The first thing required is to get the accounts-base module. As we want our users to only use their email and their password, we're just going to need the accounts-password package. Note that by installing this package, this will automatically include the accounts-base module and this is why we don't need to indicate it in our command below.

Meteor also provides other useful login provider packages such as facebook connect, twitter, google, github, meetup or weibo.

2.2. The Template.

Now, here is our main HTML file, the backbone of our application. If you are wondering what are all these specific tags, you should take a look at the handlebars documentation but I will explain them in a few seconds.

We can see the four parts of our application we discussed above. As we cannot use the negative if condition ({{#if not var}}) with handlebars, we're going to use the {{#unless}} condition that will do exactly the same thing.

There are three variables that should attract your attention: resetPassword (will be equal to a certain token after a click on the email link to recover a password), currentUser (check whether the user is logged in or not) and showForgotPassword (will be equal to true after a click on the forgot password link in order to display the form to type the email). Depending on the value of these three variables, the appropriate templates will appear.

3. Let's sign up!

3.1. Implement Validators.

Now that we have all of our templates ready, we can focus on the interesting parts. If you launch meteor right now, you should see the sign up and sign in forms emerge in your browser.

We want to give our users a way to quickly create an account but the thing is, we do not want them to join us if one of the fields (email, password or password-confirm) is missing, if the submitted email is not valid or if the two passwords are not equivalent or contain less than 6 characters. As these conditions will be reused in other parts of our application, the best way to avoid duplication in our code it is to organize them inside specific functions.

3.2. The Alert System.

As you have probably noticed, we use the session environment inside our validators to display the error message and if you remember the alert template, there was a {{alert}} variable. This is exactly at this place that we will render the message but for that, we need to create a helper that will return the value of this session.

3.3. The Registration System.

We have everything we need now. To register our users, we associate an event handler to our signUp template so as to catch and prevent the form submission. We then retrieve the value of each input, we check them with our validators and finally, if nothing went wrong, we call the Accounts.create User function with a callback that will tell us if the email is already used or if an error occurred. If the account is created, the user will be automatically logged in and a message to welcome him will appear.

If you are wondering why we are using e.preventDefault(), this is simply to prevent the redirection to the form action and let the error message display in our browser console if we have one.

If you type a valid email and two equivalent passwords with at least 6 characters, you should see "Congrats! You're now a new Meteorite!" and the content of the signOut Template. If you want to check that a user has been created, type the following command inside your browser console to return your userId.

4. Sign out in a snap!

Okay, so now you're logged in but you cannot sign out yet. To solve this problem, we have to write another event handler but this time, for the signOut template. Then, by calling the Meteor.logout function we will disconnect our user from our application and display a goodbye message.

If you click on the sign out link, you should instantly see the sign in and sign up form reappear altogether. That's what I like with Meteor, everything is in real time and you can really design a great user experience with some imagination.

5. The Sign In System.

The sign in system is really similar. We attach an event handler to the signIn template, catch the form submission, retrieve and check if the email and the password are valid.

6. Recover My Password.

6.1. Make the forgot form appear.

At the moment, if you click on the forgot password link nothing will happen and we have to change that. Each time we catch a click on this link, we will change the showForgotPassword session to true and return it with the showForgotPassword helper.

6.2. Send the email.

To send an email with Meteor, we first need to add the email package and create an smtp.js file in your server directory with the correct configuration.

Then, we just need to attach an event handler to catch the submission and send an email if the address is valid. Of course, we also want to make reappear the sign in and sign up form if the user click on the return link.

If your email is not sent and appears in your terminal, be sure that you have properly configure the process.env.MAIL_URL variable.

6.3. Change the password.

Check your mailbox and click on the link. You should be redirected to your application but the resetPasswordForm doesn't appear. We just forgot two things: catch the resetPasswordToken (the string at the end of your url) and pass it to the resetPassword session and create an helper to return its value to our template (this is what make the form appear).

Now, return to your mailbox and click on the link again. This time, everything is right. So, there is one last thing to do catch the form submission, check that everything is valid and change the password. Then we reset the resetPassword session to make the sign in and sign up form reappears.

And that's all.

Congrats! You just wrote a complete authentication system. I hope this tutorial has been useful to you and that you now have a better idea on the way to deal with Meteor.