Create Social Media Profile Pictures with Nuxt.js

Eugene Musebe

Introduction

With internet users now having multiple accounts with many social media platforms, the use of social media authentication has now increased. When a user signs up using Facebook, for example, the fewer details they manually need to input the better. This is why we need to fetch data such as profile pictures automatically, instead of asking them to upload different ones. Let’s explore how we can do this easily in Nuxt.Js.

Codesandbox

The final project can be viewed on Codesandbox.

You can find the full source code on my Github repository.

Nuxt.Js Setup

Nuxt.Js is a Vue.Js framework that allows us to build with confidence. To set it up, ensure you have either Yarn installed or NPM v5.2+ or v6.1+. Open your directory of choice and run the following command.

NUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>

1# Receiving social network and identifier
2
3In a real-life application, when the user authenticates using a social media option, we will automatically receive their social media network and their unique identifier. But for this demo, let us create a form that allows manual selection and input of these details. First, let us store the empty form state and the network options in the `script` section of our `pages/index.vue` file.
4
5```js
6// pages/index.vue
7<script>
8export default {
9 name: 'IndexPage',
10 data(){
11 return {
12 form:{
13 network:null,
14 identifier:'',
15 submitted:false
16 },
17 networks:[
18 {
19 name:'Facebook ID (Numeric)',
20 value:'facebook',
21 type:'number',
22 hint:'For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID obtained through authentication.'
23 },
24 {
25 name:'Twitter ID (Numeric)',
26 value:'twitter',
27 type:'number',
28 hint:'The Twitter user ID is the unique numeric obtained once the user has authenticated into your application'
29 },
30 {
31 name:'Twitter Username (Alphanumeric)',
32 value:'twitter_name',
33 type:'text',
34 hint:'The Twitter username is the alphanumeric unique screen name for each twitter user account.'
35 },
36 {
37 name:'Gravatar Email Address (Alphanumeric)',
38 value:'gravatar',
39 type:'text',
40 hint: 'The email address of the Gravatar user account'
41 },
42 ],
43 ...
44 },
45 mounted(){
46 this.form.network = this.networks[0];
47 },
48 },
49 ...
50}
51</script>

As visible above, Cloudinary currently only supports the following social networks:

  • Facebook (Numeric user ID)
  • Twitter (Numeric user ID)
  • Twitter (Alphanumeric username)
  • Gravatar (Email)

Once the page is mounted, we will set our first network (Facebook) as our default selection. Let us now add the HTML form to allow user input and selection.

1<!-- pages/index.vue -->
2<form @submit.prevent="submit" @reset.prevent="reset">
3 <div>
4 <label for="network">
5 Social network
6 </label>
7 <div>
8 <select @change="unsubmit" required v-model="form.network" id="network" name="network" autocomplete="network">
9 <option v-for="network in networks" :key="network.value" :value="network">{{network.name}}</option>
10 </select>
11 </div>
12 </div>
13 <div v-if="form.network">
14 <label for="identifier">
15 {{ form.network.name }}
16 </label>
17 <div>
18 <input @keypress="unsubmit" required v-model="form.identifier" :type="form.network.type" name="identifier" id="identifier" />
19 <p>
20 {{form.network.hint}}
21 </p>
22 </div>
23 </div>
24 <div class="flex justify-end">
25 <button type="reset">
26 Reset
27 </button>
28 <button type="submit">
29 Fetch
30 </button>
31 </div>
32</form>

Once a user submits or resets the form, the submit and reset methods are called respectively. The unsubmit method is called when a keypress is detected in the input or when the social network selection changes. Let us add them.

1// pages/index.vue
2<script>
3import md5 from "`crypto-js`/md5";
4
5export default {
6 ...
7 methods:{
8 unsubmit(){
9 this.form.submitted='false';
10 },
11 submit(){
12 if(this.form.network.value === 'gravatar'){
13 this.form.identifier = md5(this.form.identifier);
14 }
15 this.form.submitted='true';
16 },
17 reset(){
18 this.form = {
19 network:null,
20 identifier:'',
21 submitted:'false'
22 };
23 this.form.network = this.networks[0];
24 }
25 }
26}
27</script>

Gravatar requires that the email address is encoded using the MD5 hash. We use the crypto-js package to do this, let us install it.

1yarn add crypto-js
2# OR
3npm i crypto-js

Fetching the social media image

Once the form.submitted has been marked as true, we need to fetch the image. We will use the inbuilt CldImage component for this.

1<!-- pages/index.vue -->
2<div>
3 <cld-image
4 v-if="form.submitted == 'true'"
5 :public-id="`${form.identifier}.jpg`"
6 :type="form.network.value"
7 :alt="`${form.network.value} - ${form.identifier}`"
8 >
9 </cld-image>
10</div>

We pass the identifier as the public-id and the network as the type. We also compute an alt text for display if loading fails. Now when the form is submitted, the image will be loaded into the component.

Conclusion

With the above knowledge, we are now able to improve our application's user experience. To learn more about delivering profile pictures, feel free to review the Cloudinary documentation.

Eugene Musebe

Software Developer

I’m a full-stack software developer, content creator, and tech community builder based in Nairobi, Kenya. I am addicted to learning new technologies and loves working with like-minded people.