|
1 | 1 | ## Social Authentication
|
2 | 2 |
|
3 |
| -Azure App Service provides built-in support for Facebook, Google, Microsoft and Twitter. Irrespective of whether |
4 |
| -you intend to use server-flow or client-flow, you will need to configure the Azure App Service Authentication / |
5 |
| -Authorization service. The method is pretty similar in each case: |
| 3 | +Azure App Service provides built-in support for Facebook and Google. Microsoft and Twitter are also accepted, but Microsoft authentication is handled within the context of Azure Active Directory (and is an option when creating the app registration), and Twitter uses the older (and insecure) OAuth v1 protocol. It should not be used. |
| 4 | + |
| 5 | +Irrespective of whether you intend to use server-flow or client-flow, you will need to configure the Azure App Service Authentication / Authorization service. The method is pretty similar in each case: |
6 | 6 |
|
7 | 7 | 1. Obtain a Developer Account for the provider.
|
8 | 8 | 2. Create a new application, obtaining a Client ID and Secret.
|
@@ -146,95 +146,6 @@ If you happen to mis-type the Authorized redirect URI, Google will inform you th
|
146 | 146 | !!! warn
|
147 | 147 | Google has changed the security semantics for its authentication service. You must use the v3.1.0 of the Azure Mobile Apps Client SDK for Server Flow authentication with Google to work.
|
148 | 148 |
|
149 |
| -## Microsoft Account Configuration |
150 |
| - |
151 |
| -The advantage of the Microsoft Account (or MSA, as it is known) is that you already have an account - you need |
152 |
| -one for accessing Azure in general. Go to the [Microsoft Account Developer Center][13] and log on with |
153 |
| -your Microsoft account. You should use the same one as you use for Azure, but it is not required. |
154 |
| - |
155 |
| -![Microsoft Account Developer Center][img14] |
156 |
| - |
157 |
| -Just to confuse us, there are two **Add an App** buttons. Strangely, they are different. Click the one next to |
158 |
| -**Converged applications**. |
159 |
| - |
160 |
| -![MSA: Create an application][img15] |
161 |
| - |
162 |
| -Enter an awesome name, then lick **Create application**. |
163 |
| - |
164 |
| -![MSA: Add a Platform][img16] |
165 |
| - |
166 |
| -Click **Add Platform**, followed by **Web**. In the **Redirect URIs**, enter your app URL + |
167 |
| -`/.auth/login/microsoftaccount/callback`. Then Click **Save**. |
168 |
| - |
169 |
| -![MSA: Redirect URI][img17] |
170 |
| - |
171 |
| -Now Click **Generate New Password** under **Application Secrets**. |
172 |
| - |
173 |
| -![MSA: New password][img18] |
174 |
| - |
175 |
| -Unlike the other social providers, this is the only time you will get to see your client secret, so make a note of it or copy and paste it into a notepad. Once you have it copied somewhere, Click **OK**, followed by **Save**. |
176 |
| - |
177 |
| -You now have all the information you need to configure the Microsoft Account section within your App Server |
178 |
| -Authentication / Authorization. The Client ID you need to enter is the Application ID and the Client Secret is the |
179 |
| -password you just copied somewhere. |
180 |
| - |
181 |
| -![MSA: Configuration of App Service][img19] |
182 |
| - |
183 |
| -Note that you have to choose claims that you want to read. The **wl.basic** and **wl.emails** will give you enough |
184 |
| -information to get started with this tutorial. |
185 |
| - |
186 |
| -Click **OK** (at the bottom), followed by **Save** (at the top). You can test the settings by pointing your browser |
187 |
| -to https://_yoursite_.azurewebsites.net/.auth/login/microsoftaccount. You will see what should be a normal claims |
188 |
| -request page: |
189 |
| - |
190 |
| -![MSA: Claims Request][img20] |
191 |
| - |
192 |
| -Clicking on **Yes** should take you to the normal success page. |
193 |
| - |
194 |
| -## Twitter Configuration |
195 |
| - |
196 |
| -I hope you are seeing that all the OAuth providers take a very similar route to configuring their service. The semantics of the service are slightly different in each case. Twitter is no different. As you might expect, before continuing, sign up for [Twitter][14]. Once you have signed up, the [Twitter Developers Portal][15] is your next stop. Once there, click **Create New App**: |
197 |
| - |
198 |
| -![Twitter: New App][img21] |
199 |
| - |
200 |
| -Most of the fields are self-explanatory. The **Callback URL** is the same thing that the other social providers have |
201 |
| -called the Redirect URL. The appropriate value is your app URL + `/.auth/login/twitter/callback`. There is a legal |
202 |
| -agreement at the bottom of the page, then you can Click **Create your Twitter application** button. |
203 |
| - |
204 |
| -!!! danger |
205 |
| - All social authentication providers have some sort of legal agreement that governs their use. In general, demo or |
206 |
| - PoC apps are fair use. However, you should get a legal opinion before using a social authentication provider in a |
207 |
| - production app. |
208 |
| - |
209 |
| -Once you have created the app, you will get a tabbed display with all the settings. Click the **Keys and Access |
210 |
| -Tokens** tab: |
211 |
| - |
212 |
| -![Twitter: Keys][img22] |
213 |
| - |
214 |
| -Note the values for the **Consumer Key (API Key)** and **Consumer Secret (API Secret)**. They get entered into the |
215 |
| -Azure Portal. |
216 |
| - |
217 |
| -!!! warn |
218 |
| - There is a check box in the **Settings** tab that says _Allow this application to be used to Sign in with Twitter_. |
219 |
| - At the time of writing, this is checked by default. However, if you find you can not log in for some reason, then |
220 |
| - ensure this checkbox is checked. |
221 |
| - |
222 |
| -Back in the Azure Portal, select your app service, then **All Settings**, **Authentication / Authorization**, and |
223 |
| -finally **Twitter** (assuming you have already turned Authentication on). You can now cut and paste the Consumer |
224 |
| -Key and Consumer Secret into the appropriate boxes, before clicking on **OK** (at the bottom) followed by **Save** |
225 |
| -(at the top). |
226 |
| - |
227 |
| -As with the other providers, you should test the authentication flow by pointing your browser to |
228 |
| -https://_yoursite_.azurewebsites.net/.auth/login/twitter. |
229 |
| - |
230 |
| -![Twitter: Authorize App][img23] |
231 |
| - |
232 |
| -Clicking on **Authorize app** should show you our normal successful authentication screen. |
233 |
| - |
234 |
| -The social authentication providers should now all be configured to handle a web-based or server-flow authentication |
235 |
| -request. There are times when configuring a client-flow authentication is different. We will point those out when we |
236 |
| -get to them. |
237 |
| - |
238 | 149 | ## Adding Authentication to a Mobile Client
|
239 | 150 |
|
240 | 151 | Now that the backend is completely configured, we can move our attention to the mobile client. We are going to be
|
|
0 commit comments