logo

LICENSE

@@ -1,8 +1,24 @@
-<!--- 
-Choose an open license and add it here. If you need help, take a look 
-at http://choosealicense.com/. Below is 
-CC-BY-4.0 (approriate for non-code works)
---->
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
 
 
 Attribution 4.0 International

README.md

@@ -1,25 +1,79 @@
-# [ Project Title ]
+![messaging apps and web browsers](/web-and-messaging.png?raw=true "Messaging apps and web browsers.")
 
-[ Do you have a [project vision or mission statement](https://mozilla.github.io/open-leadership-training-series/articles/introduction-to-open-leadership/stating-your-project-vision/)? Add it here! Otherwise, add a short descirption of your project.]
+# Web and Messaging
 
-[ If you have one, add your logo or an image here ]
+Browsers are how we access the web, and contain a *lot* of useful information about us - what we read, our schedule, our interests, where we shop, bank and more.
 
-[ Your longer project description goes here. Use this space to welcome newcomers, articulate the problem you're trying to solve, and explain your solution. For help on writing a good readme, see [this exercise](https://mozilla.github.io/open-leadership-training-series/articles/opening-your-project/write-a-great-project-readme/). ]
+Messaging apps are how we connect to our friends, families, and increasingly how we talk to bots, services, devices and take care of business.
+
+How can we bridge these worlds? How can we make them complementary?
+
+Let's explore how to make these two integral parts of our online lives play together!
+
+Last year we focused on enumerating features possible in each area, and listing APIs for different messengers.
+
+**Examples**
+
+* A bot in a messaging app that you can ask for information about your browser profile: "What's that page I was reading about the Hutongs of Beijing?".
+
+* A service in the browser that sends web pages, images and videos to your friends in your messaging apps.
+
+* A bot in the messaging app that sends you username/password hints for your websites via a secure channel, or acts as a two-factor authentication mechanism somehow?
+
+* Saving web pages you saw in the messaging app to your browser history, or as bookmarks.
+
+Join in the chat: https://gitter.im/web-and-messaging/general
+
+This project is part of the [Mozilla Global Sprint](https://foundation.mozilla.org/opportunity/global-sprint/) on May 10-11, 2018.
+It's a gathering both in-person at sites around the world and online to collaborate on projects and learn from each other.
+[Sign up here](https://foundation.mozilla.org/opportunity/global-sprint/participate/), and then read on to participate in this project.
+
+## Participation
+
+This year, I'm going to focus on building a browser extension that logs you into one or more messenger apps, and maybe a bot that logs you into Firefox. You can participate in that project, or in any other type of exploration of this area:
+
+* *Design:* [Ideation](https://toolkit.mozilla.org/method/idea-generation/) on possible types of integrations in either direction. Bots? Add-ons? Deep-linking? Games? Media? How can usage in one complement the other, in either direction? Add your ideas to the [Ideation issue](https://github.com/autonome/web-and-messaging/issues/1).
+* *Research:* Most popular messaging apps broken down by country and userbase, or listing the API abilities and links to documentation for the top apps?
+* *Research:* What browser add-ons exist which integrate with messaging apps?
+* *Research:* Which browser features and data which might be useful for sending to, or receiving from messaging apps. What add-on APIs existing in browsers for these, if any?
+* *Assets:* Creating asset repositories or documenting the license and URLs of things like icons for the apps and the browsers.
+* *Prototypes:* [Prototype](https://toolkit.mozilla.org/methods/) ideas for messaging app and browser integrations. Some discoveries are only possible by trying things out!
+* *Tools:* Building or documenting tools for connecting services. For example, libraries for authenticating users to their messaging services or browser services.
+* *Anything* else you can think of related to how the web and messaging apps can integrate!
 
 ## Getting Started
 
-[ Use this section to orient newcomers to your project on how to use it. Installation or download instructions? Viewing instructions? Example code snippet? Add them here! ]
+* Have any information or ideas for things related to integrating messaging apps with the web? File an issue to share it!
+* Want to contribute documentation, research or design information? Send a pull request!
 
 ## Contributing
 
-Thanks for your interest in contributing to [PROJECT]! There are many ways to contribute. To get started, take a look at [CONTRIBUTING.md](CONTRIBUTING.md).
+Thanks for your interest in contributing to Web and Messaging! There are many ways to contribute. See examples of the types of contributions above.
+
+To add your ideas or projects, or to work on one of the ideas listed above, create a new issue for it and we'll work on it there together.
+
+To add documents, data or code to the repo:
+
+> 1. **[Fork](https://help.github.com/articles/fork-a-repo/) this repository**. This makes your own version of this project you can edit and use.
+> 2. **[Make your changes](https://guides.github.com/activities/forking/#making-changes)**! You can do this in the GitHub interface on your own local machine. Once you're happy with your changes...
+> 3. **Submit a [pull request](https://help.github.com/articles/proposing-changes-to-a-project-with-pull-requests/)**. This opens a discussion around your project and lets the project lead know you are proposing changes.
+
+> First time contributing to open source? Check out this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+
+## Communication channels
+
+Come chat on Gitter.im: https://gitter.im/web-and-messaging/general
 
 ## Participation Guidelines
 
-This project adheres to a [code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [EMAIL].
+This project adheres to a [code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [[email protected]].
+
+## Who Am I?
+
+I'm Dietrich Ayala, a developer relationist at Mozilla. [Email me](mailto:[email protected]) or reach me at [@dietrich](https://twitter.com/dietrich) on Twitter.
 
 ## MozSprint
 
-Join us at the [Mozilla Global Sprint](http://mozilla.github.io/global-sprint/) June 1-2, 2017! We'll be gathering in-person at sites around the world and online to collaborate on this project and learn from each other. [Get your #mozsprint tickets now](http://mozilla.github.io/global-sprint/)!
+Join us at the [Mozilla Global Sprint](https://foundation.mozilla.org/opportunity/global-sprint/) May 10-11, 2018! We'll be gathering in-person at sites around the world and online to collaborate on this project and learn from each other. [Get your #mozsprint tickets now](https://foundation.mozilla.org/opportunity/global-sprint/participate/)!
 
 ![Global Sprint](https://cloud.githubusercontent.com/assets/617994/24632585/b2b07dcc-1892-11e7-91cf-f9e473187cf7.png)

line-extension/README.md

@@ -0,0 +1,12 @@
+# Line Extension for Browsers
+
+Browser extension that logs the user into Line and stores the access token for API requests.
+
+Documentation for Line API: https://developers.line.me/en/docs/line-login/web/integrate-line-login/
+
+## TODO
+
+* Error handling for failed responses
+* Support refreshing token before expiration
+* Figure out securely storing consumer secret
+

line-extension/background.js

@@ -0,0 +1,85 @@
+let state = {
+	accessToken: null,
+	username: ''
+};
+
+const REQ_API_URL = 'https://access.line.me/oauth2/v2.1/authorize';
+const ACC_TOK_URL = 'https://api.line.me/oauth2/v2.1/token';
+
+const CHANNEL_ID = '';
+const CHANNEL_SECRET = '';
+
+(async function() {
+  let storedData = await browser.storage.local.get('state');
+  if (storedData && storedData.state) {
+    state = storedData.state;
+  }
+
+  // Authenticate if necessary
+  if (!state.accessToken) {
+    await authenticate();
+  }
+})();
+
+async function authenticate() {
+  let redirectURL = browser.identity.getRedirectURL();
+
+  let reqAPIURL = REQ_API_URL + '?'
+    + 'response_type=code'
+    + '&client_id=' + CHANNEL_ID
+    + '&redirect_uri=' + encodeURIComponent(redirectURL)
+    + '&state=' + Date.now()
+    + '&scope=profile%20openid'
+    + '&bot_prompt=aggressive';
+
+  let authResult = await browser.identity.launchWebAuthFlow({
+    interactive: true,
+    url: reqAPIURL
+  });
+
+  // TODO handle failures here
+
+  let url = new URL(authResult);
+  let authCode = url.searchParams.get('code');
+
+  // Get access token
+  let params = {
+    grant_type: 'authorization_code',
+    code: authCode,
+    redirect_uri: encodeURIComponent(redirectURL),
+    client_id: CHANNEL_ID,
+    client_secret: CHANNEL_SECRET
+  };
+
+  let fd = Object.keys(params).map(k => k + '=' + params[k]).join('&');
+
+  let accessResponse = await fetch(ACC_TOK_URL, {
+		method: 'POST',
+		headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+		},
+    body: fd
+	});
+
+  // TODO handle failures here
+
+  let access = await accessResponse.json();
+
+  state.accessToken = access.access_token;
+  state.idToken = access.id_token;
+  state.idInfo = parseJwt(access.id_token);
+  state.refreshToken = access.refresh_token;
+  state.expiresIn = access.expires_in;
+
+  saveState();
+}
+
+async function saveState() {
+  await browser.storage.local.set({state})
+}
+
+function parseJwt (token) {
+  var base64Url = token.split('.')[1];
+  var base64 = base64Url.replace('-', '+').replace('_', '/');
+  return JSON.parse(window.atob(base64));
+}

line-extension/manifest.json

@@ -0,0 +1,16 @@
+{
+  "manifest_version": 2,
+  "name": "Line auth example",
+  "description": "Log into Line messenger app from a browser extension.",
+  "version": "1.0.0",
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "applications": { "gecko": { "id": "[email protected]" } },
+  "permissions": [
+    "identity",
+    "storage",
+    "https://access.line.me/",
+    "https://api.line.me/"
+  ]
+}

wechat-extension/README.md

@@ -0,0 +1,9 @@
+# WeChat Extension for Browsers
+
+Browser extension that logs the user into WeChat and stores the access token for API requests.
+
+Documentation for WeChat API: http://open.wechat.com/cgi-bin/newreadtemplate?t=overseas_open/docs/web/login/login
+
+## TODO
+
+

wechat-extension/background.js

@@ -0,0 +1,81 @@
+let state = {
+	accessToken: null,
+	username: ''
+};
+
+const REQ_API_URL = 'https://open.weixin.qq.com/connect/qrconnect';
+const ACC_TOK_URL = 'https://api.weixin.qq.com/sns/oauth2/access_token';
+
+const APP_ID = '';
+const APP_SECRET = '';
+
+(async function() {
+  let storedData = await browser.storage.local.get('state');
+  if (storedData && storedData.state) {
+    state = storedData.state;
+  }
+
+  // Authenticate if necessary
+  if (!state.accessToken) {
+    await authenticate();
+  }
+})();
+
+async function authenticate() {
+  let redirectURL = browser.identity.getRedirectURL();
+
+  let reqParams = {
+    appid: APP_ID,
+    redirect_uri: encodeURIComponent(redirectURL),
+    response_type: 'code',
+    scope: 'snsapi_login'
+  }
+
+  let reqParamStr = Object.keys(reqParams).map(k => k + '=' + reqParams[k]).join('&');
+
+  let reqAPIURL = REQ_API_URL + '?' + reqParamStr;
+
+  let authResult = await browser.identity.launchWebAuthFlow({
+    interactive: true,
+    url: reqAPIURL
+  });
+
+  // TODO handle failures here
+
+  console.log('auth result', authResult);
+  let url = new URL(authResult);
+  let authCode = url.searchParams.get('code');
+  let authState = url.searchParams.get('state');
+
+  // Get access token
+  let accParams = {
+    appid: APP_ID,
+    secret: APP_SECRET,
+    code: authCode,
+    grant_type: 'authorization_code'
+  };
+
+  let accParamStr = Object.keys(accParams).map(k => k + '=' + accParams[k]).join('&');
+
+  let accessURL = ACC_TOK_URL + '?' + accParamStr;
+
+  let accessResponse = await fetch(accessURL);
+
+  // TODO handle failures here
+
+  let access = await accessResponse.json();
+
+  state.accessToken = access.access_token;
+  state.expiresIn = access.expires_in;
+  state.refreshToken = access.refresh_token;
+  state.openId = access.openid;
+  state.scope = access.scope;
+  state.unionid = access.unionid;
+
+  saveState();
+}
+
+async function saveState() {
+  await browser.storage.local.set({state})
+}
+

wechat-extension/manifest.json

@@ -0,0 +1,16 @@
+{
+  "manifest_version": 2,
+  "name": "WeChat auth example",
+  "description": "Log into WeChat messenger app from a browser extension.",
+  "version": "1.0.0",
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "applications": { "gecko": { "id": "[email protected]" } },
+  "permissions": [
+    "identity",
+    "storage",
+    "https://open.weixin.qq.com/",
+    "https://api.weixin.qq.com/"
+  ]
+}