Skip to content
Browse files

#415: latest versions of multi-auth revisions and some new iOS content

  • Loading branch information...
1 parent 8f713a8 commit 6ebace5b87698ce289037173d77c455511fef8fd @ggailey777 ggailey777 committed Oct 11, 2012
View
BIN DevCenter/Mobile/Media/mobile-portal-quickstart-ios.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-portal-quickstart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-quickstart-completed-ios.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-quickstart-startup-ios.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-quickstart-steps-ios.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-quickstart-steps.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN DevCenter/Mobile/Media/mobile-xcode-project.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
154 DevCenter/Mobile/Tutorials/mobile-services-get-started-ios.md
@@ -0,0 +1,154 @@
+<properties linkid="mobile-services-get-started" urldisplayname="Mobile Services" headerexpose="" pagetitle="Get started with Mobile Services in Windows Azure" metakeywords="Get started Windows Azure Mobile Services, mobile devices, Windows Azure, mobile, iOS, iPad app, iPhone app, " footerexpose="" metadescription="Get started using Windows Azure Mobile Services in your iOS apps." umbraconavihide="0" disquscomments="1"></properties>
+<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14812" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umbversionid="254ca664-c4f3-4815-8073-c86d43f4aa16" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
+
+<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started/" title="Windows Store version">Windows Store app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-ios/" title="iOS version" class="current">iOS app</a>
+ <span>Tutorial</span>
+</div>
+
+# <a name="getting-started"> </a>Get started with Mobile Services
+This tutorial shows you how to add a cloud-based backend service to an iOS app using Windows Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple _To do list_ app that stores app data in the new mobile service.
+
+A screenshot from the completed app is below:
+
+![][0]
+
+Completing this guide is a prerequisite for all other Mobile Services tutorials for iOS apps.
+
+<div chunk="../../Shared/Chunks/create-account-and-mobile-note.md" />
+
+<div class="dev-callout"><strong>Note</strong>
+<p>To complete this tutorial, you need a Windows Azure account that has the Windows Azure Mobile Services feature enabled. You can create a free trial account and enable preview features in just a couple of minutes. For details, see <a href="../create-a-windows-azure-account/" target="_blank">Create a Windows Azure account and enable preview features</a>. </p>
+</div>
+
+## <a name="create-new-service"> </a>Create a new mobile service
+Follow these steps to create a new mobile service.
+
+1. Log into the [Management Portal].
+2. At the bottom of the navigation pane, click **+NEW**.
+
+ ![][1]
+
+3. Expand **Mobile Service**, then click **Create**.
+
+ ![][2]
+
+ This displays the **New Mobile Service** dialog.
+
+4. In the **Create a mobile service** page, type a subdomain name for the new mobile service in the **URL** textbox and wait for name verification. Once name verification completes, click the right arrow button to go to the next page.
+
+ ![][3]
+
+ This displays the **Specify database settings** page.
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>As part of this tutorial, you create a new SQL Database instance and server. You can reuse this new database and administer it as you would any other SQL Database instance. If you already have a database in the same region as the new mobile service, you can instead choose <strong>Use existing Database</strong> and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.</p></div>
+
+6. In **Name**, type the name of the new database, then type **Login name**, which is the administrator login name for the new SQL Database server, type and confirm the password, and click the check button to complete the process.
+
+ ![][4]
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>When the password that you supply does not meet the minimum requirements or when there is a mismatch, a warning is displayed. <br/>We recommend that you make a note of the administrator login name and password that you specify; you will need this information to reuse the SQL Database instance or the server in the future.</p>
+ </div>
+
+You have now created a new mobile service that can be used by your mobile apps.
+
+## <h2><span class="short-header">Create a new app</span>Create a new iOS app</h2>
+
+Once you have created your mobile service, you can follow an easy quickstart in the Management Portal to either create a new app or modify an existing app to connect to your mobile service.
+
+In this section you will create a new iOS app that is connected to your mobile service.
+
+1. In the Management Portal, click **Mobile Services**, and then click the mobile service that you just created.
+
+2. In the quickstart tab, click **iOS** under **Choose platform** and expand **Create a new iOS app**.
+
+ ![][6]
+
+ This displays the three easy steps to create an iOS app connected to your mobile service.
+
+ ![][7]
+
+3. If you haven't already done so, download and install [Xcode] and the [Mobile Services iOS SDK] on your local computer or virtual machine.
+
+4. Click **Create TodoItems table** to create a table to store app data.
+
+5. Under **Download and run app**, click **Download**.
+
+ This downloads the project for the sample _To do list_ application that is connected to your mobile service. Save the compressed project file to your local computer, and make a note of where you save it.
+
+## Run your iOS app
+
+The final stage of this tutorial is to build and run your new app.
+
+1. Browse to the location where you saved the compressed project files, expand the files on your computer, and open the project file using Xcode.
+
+ ![][8]
+
+2. Press the **Run** button to build the project and start the app in the iPhone emulator, which is the default for this project.
+
+3. In the app, type meaningful text, such as _Complete the tutorial_ and then click the plus (**+**) icon.
+
+ ![][10]
+
+ This sends a POST request to the new mobile service hosted in Windows Azure. Data from the request is inserted into the TodoItem table. Items stored in the table are returned by the mobile service, and the data is displayed in the list.
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>You can review the code that accesses your mobile service to query and insert data, which is found in the TodoService.m file.</p>
+ </div>
+
+4. Back in the Management Portal, click the **Data** tab and then click the **TodoItems** table.
+
+ ![][11]
+
+ This lets you browse the data inserted by the app into the table.
+
+ ![][12]
+
+## <a name="next-steps"> </a>Next Steps
+Now that you have completed the quickstart, learn how to perform additional important tasks in Mobile Services:
+
+* [Get started with data]
+ <br/>Learn more about storing and querying data using Mobile Services.
+
+* [Get started with authentication]
+ <br/>Learn how to authenticate users of your app with an identity provider.
+
+* [Get started with push notifications]
+ <br/>Learn how to send a very basic push notification to your app.
+
+<!-- Anchors. -->
+[Getting started with Mobile Services]:#getting-started
+[Create a new mobile service]:#create-new-service
+[Define the mobile service instance]:#define-mobile-service-instance
+[Next Steps]:#next-steps
+
+<!-- Images. -->
+[0]: ../Media/mobile-quickstart-completed-ios.png
+[1]: ../../Shared/Media/plus-new.png
+[2]: ../Media/mobile-create.png
+[3]: ../Media/mobile-create-page1.png
+[4]: ../Media/mobile-create-page2.png
+[5]: ../Media/mobile-services-selection.png
+[6]: ../Media/mobile-portal-quickstart-ios.png
+[7]: ../Media/mobile-quickstart-steps-ios.png
+[8]: ../Media/mobile-xcode-project.png
+[9]: ../Media/mobile-quickstart-download-app.png
+[10]: ../Media/mobile-quickstart-startup-ios.png
+[11]: ../Media/mobile-data-tab.png
+[12]: ../Media/mobile-data-browse.png
+[13]: ../Media/mobile-services-diagram.png
+
+<!-- URLs. -->
+[Get started with data]: ./mobile-services-get-started-with-data-ios.md
+[Get started with authentication]: ./mobile-services-get-started-with-users-ios.md
+[Get started with push notifications]: ./mobile-services-get-started-with-push-ios.md
+[Xcode]: https://go.microsoft.com/fwLink/p/?LinkID=266532
+[Mobile Services iOS SDK]: https://go.microsoft.com/fwLink/p/?LinkID=266533
+[WindowsAzure.com]: http://www.windowsazure.com/
+[Management Portal]: https://manage.windowsazure.com/
View
272 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-data-ios.md
@@ -0,0 +1,272 @@
+<properties linkid="mobile-services-get-started-with-data-ios" urldisplayname="Mobile Services" headerexpose="" pagetitle="Get started with data in Windows Azure Mobile Services" metakeywords="access and change data, Windows Azure Mobile Services, mobile devices, Windows Azure, mobile, iPhone, iPad, iOS app" footerexpose="" metadescription="More in-depth review of how to access and change in your iOS-based app using Windows Azure Mobile Services." umbraconavihide="0" disquscomments="1"></properties>
+
+<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14798" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
+
+<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-dotnet/" title="Windows Store version">Windows Store app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-js/" title="iOS version" class="current">iOS app</a>
+ <span>Tutorial</span>
+</div>
+
+# Get started with data in Mobile Services
+
+This topic shows you how to use Windows Azure Mobile Services to leverage data in an iOS app. In this tutorial, you will download an app that stores data in memory, create a new mobile service, integrate the mobile service with the app, and then login to the Windows Azure Management Portal to view changes to data made when running the app.
+
+<div class="dev-callout"><b>Note</b>
+<p>This tutorial is intended to help you better understand how Mobile Services enables you to use Windows Azure to store and retrieve data from an iOS app. As such, this topic walks you through many of the steps that are completed for you in the Mobile Services quickstart. If this is your first experience with Mobile Services, consider first completing the tutorial <a href="/en-us/develop/mobile/tutorials/get-started-ios">Get started with Mobile Services</a>.</p>
+</div>
+
+This tutorial walks you through these basic steps:
+
+1. [Download the Windows Store app project][Get the Windows Store app]
+2. [Create the mobile service]
+3. [Add a data table for storage]
+4. [Update the app to use Mobile Services]
+5. [Test the app against Mobile Services]
+
+This tutorial requires the [Mobile Services SDK].
+
+## <a name="download-app"></a>Download the project
+
+This tutorial is built on the [GetStartedWithData app][Developer Code Samples site], which is a Windows Store app. The UI for this app is identical to the app generated by the Mobile Services quickstart, except that added items are stored locally in memory.
+
+1. Download the C# version of the GetStartedWithData sample app from the [Developer Code Samples site].
+
+ ![][10]
+
+2. In Visual Studio 2012 Express for Windows 8, open the downloaded project and examine the MainPage.xaml.cs file.
+
+ Notice that added **TodoItem** objects are stored in an in-memory **ObservableCollection&lt;TodoItem&gt;**.
+
+3. Press the **F5** key to rebuild the project and start the app.
+
+4. In the app, type some text in **Insert a TodoItem**, then click **Save**.
+
+ ![][0]
+
+ Notice that the saved text is displayed in the second column under **Query and update data**.
+
+## <a name="create-service"></a>Create mobile service
+
+Next, you will create a new mobile service to replace the in-memory list for data storage. Follow these steps to create a new mobile service.
+
+1. Log into the [Windows Azure Management Portal].
+2. At the bottom of the navigation pane, click **+NEW**.
+
+ ![][1]
+
+3. Expand **Compute** and **Mobile Service**, then click **Create**.
+
+ ![][2]
+
+ This displays the **New Mobile Service** dialog.
+
+4. In the **Create a mobile service** page, type a subdomain name for the new mobile service in the **URL** textbox and wait for name verification. Once name verification completes, click the right arrow button to go to the next page.
+
+ ![][3]
+
+ This displays the **Specify database settings** page.
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>As part of this tutorial, you create a new SQL Database instance and server. You can reuse this new database and administer it as you would any other SQL Database instance. If you already have a database in the same region as the new mobile service, you can instead choose <b>Use existing Database</b> and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.</p></div>
+
+5. In **Name**, type the name of the new database, then type **Login name**, which is the administrator login name for the new SQL Database server, type and confirm the password, and click the check button to complete the process.
+
+ ![][4]
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>When the password that you supply does not meet the minimum requirements or when there is a mismatch, a warning is displayed. <br/>We recommend that you make a note of the administrator login name and password that you specify; you will need this information to reuse the SQL Database instance or the server in the future.</p>
+ </div>
+
+
+You have now created a new mobile service that can be used by your mobile apps. Next, you will add a new table in which to store app data. This table will be used by the app in place of the in-memory collection.
+
+## <a name="add-table"></a>Add a new table
+
+To be able to store app data in the new mobile service, you must first create a new table in the associated SQL Database instance.
+
+1. In the Management Portal, click **Mobile Services**, and then click the mobile service that you just created.
+
+2. Click the **Data** tab, then click **+Create**.
+
+ ![][5]
+
+ This displays the **Create new table** dialog.
+
+3. In **Table name** type _TodoItem_, then click the check button.
+
+ ![][6]
+
+ This creates a new storage table **TodoItem** with the default permissions set, which means that any user of the app can access and change data in the table.
+
+ <div class="dev-callout">
+ <b>Note</b>
+ <p>The same table name is used in Mobile Services quickstart. However, each table is created in a schema that is specific to a given mobile service. This is to prevent data collisions when multiple mobile services use the same database.</p>
+ </div>
+
+4. Click the new **TodoItem** table and verify that there are no data rows.
+
+5. Click the **Columns** tab and verify that there is only a single **id** column, which is automatically created for you.
+
+ This is the minimum requirement for a table in Mobile Services.
+
+ <div class="dev-callout"><b>Note</b>
+ <p>When dynamic schema is enabled on your mobile service, new columns are created automatically when JSON objects are sent to the mobile service by an insert or update operation.</p>
+ </div>
+
+You are now ready to use the new mobile service as data storage for the app.
+
+## <a name="update-app"></a>Update the app
+
+Now that your mobile service is ready, you can update the app to store items in Mobile Services instead of the local collection.
+
+0. If you haven't already installed the [Mobile Services SDK], install it now.
+
+1. In the **Project** menu in Visual Studio, click **Add Reference**, then expand **Windows**, click **Extensions**, check **Windows Azure Mobile Services Managed Client**, and click **OK**.
+
+ ![][7]
+
+ This adds a reference to the Mobile Services client to the project.
+
+2. In both the MainPage.xaml.cs and App.xaml.cs project files, add the following **using** statement:
+
+ using Microsoft.WindowsAzure.MobileServices;
+
+3. In the Management Portal, click **Mobile Services**, and then click the mobile service you just created.
+
+4. Click the **Dashboard** tab and make a note of the **Site URL**, then click **Manage keys** and make a note of the **Application key**.
+
+ ![][8]
+
+ You will need these values when accessing the mobile service from your app code.
+
+5. In Visual Studio, open the file App.xaml.cs, uncomment the code that defines the **MobileService** variable, and supply the URL and application key from the mobile service in the **MobileServiceClient** constructor, in that order.
+
+ This creates a new instance of MobileServiceClient that is used to access your mobile service.
+
+6. In the file MainPage.xaml.cs, comment the line that defines the existing **items** collection, and uncomment the following lines:
+
+ private MobileServiceCollectionView<TodoItem> items;
+ private IMobileServiceTable<TodoItem> todoTable =
+ App.MobileService.GetTable<TodoItem>();
+
+ This code creates a mobile services-aware binding collection (**items**) and a proxy class for the SQL Database table **TodoItem** (**todoTable**).
+
+7. In the **InsertTodoItem** method, remove the line of code that sets the **TodoItem**.**Id** property, add the **async** modifier to the method, and uncomment the following line of code:
+
+ await todoTable.InsertAsync(todoItem);
+
+ This code inserts a new item into the table.
+
+8. In the **RefreshTodoItems** method, uncomment the following line of code:
+
+ items = todoTable.ToCollectionView();
+
+ This sets the binding to the collection of items in the todoTable, which contains all TodoItem objects returned from the mobile service.
+
+9. In the **UpdateCheckedTodoItem** method, add the **async** modifier to the method, and uncomment the following line of code:
+
+ await todoTable.UpdateAsync(item);
+
+ This sends an item update to the mobile service.
+
+Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.
+
+## <a name="test-app"></a>Test the app
+
+1. In Visual Studio, press the F5 key to run the app.
+
+2. As before, type text in **Insert a TodoItem**, and then click **Save**.
+
+ This sends a new item as an insert to the mobile service.
+
+3. In the [Management Portal], click **Mobile Services**, and then click your mobile service.
+
+4. Click the **Data** tab, then click **Browse**.
+
+ ![][9]
+
+ Notice that the **TodoItem** table now contains data, with id values generated by Mobile Services, and that columns have been automatically added to the table to match the TodoItem class in the app.
+
+5. In the app, check one of the items in the list, then go back to the Browse tab in the portal and click **Refresh**.
+
+ Notice that the complete value has changed from **false** to **true**.
+
+6. In the MainPage.xaml.cs project file, replace the existing **RefreshTodoItems** method with the following code that filters out completed items:
+
+ private void RefreshTodoItems()
+ {
+ // This query filters out completed TodoItems.
+ items = todoTable
+ .Where(todoItem => todoItem.Complete == false)
+ .ToCollectionView();
+
+ ListItems.ItemsSource = items;
+ }
+
+7. In the app, check another one of the items in the list and then click the **Refresh** button.
+
+ Notice that the checked item now disappears from the list. Each refresh results in a round-trip to the mobile service, which now returns filtered data.
+
+This concludes the **Get started with data** tutorial.
+
+## <a name="next-steps"> </a>Next steps
+
+This tutorial demonstrated the basics of enabling an iOS app to work with data in Mobile Services.
+
+<!--Next, consider completing one of the following tutorials that is based on the GetStartedWithData app that you created in this tutorial:
+
+* [Validate and modify data with scripts]
+ <br/>Learn more about using server scripts in Mobile Services to validate and change data sent from your app.
+
+* [Refine queries with paging]
+ <br/>Learn how to use paging in queries to control the amount of data handled in a single request.
+
+Once you have completed the data series, -->
+
+Next, try one of these other iOS tutorials:
+
+* [Get started with authentication]
+ <br/>Learn how to authenticate users of your app with Windows Account.
+
+* [Get started with push notifications]
+ <br/>Learn how to send a very basic push notification to your app.
+
+<!-- Anchors. -->
+
+[Get the Windows Store app]: #download-app
+[Create the mobile service]: #create-service
+[Add a data table for storage]: #add-table
+[Update the app to use Mobile Services]: #update-app
+[Test the app against Mobile Services]: #test-app
+[Next Steps]:#next-steps
+
+<!-- Images. -->
+[0]: ../Media/mobile-quickstart-startup.png
+[1]: ../../Shared/Media/plus-new.png
+[2]: ../Media/mobile-create.png
+[3]: ../Media/mobile-create-page1.png
+[4]: ../Media/mobile-create-page2.png
+[5]: ../Media/mobile-data-tab-empty.png
+[6]: ../Media/mobile-create-todoitem-table.png
+[7]: ../Media/mobile-add-reference-ios.png
+[8]: ../Media/mobile-dashboard-tab.png
+[9]: ../Media/mobile-todoitem-data-browse.png
+[10]: ../Media/mobile-data-sample-download-ios.png
+
+
+<!-- URLs. -->
+[Validate and modify data with scripts]: ./mobile-services-validate-and-modify-data-dotnet.md
+[Refine queries with paging]: ./mobile-services-paging-data-ios.md
+[Get started with Mobile Services]: ./mobile-services-get-started-ios.md
+[Get started with data]: ./mobile-services-get-started-with-data-ios.md
+[Get started with authentication]: ./mobile-services-get-started-with-users-ios.md
+[Get started with push notifications]: ./mobile-services-get-started-with-push-ios.md
+[WindowsAzure.com]: http://www.windowsazure.com/
+[Windows Azure Management Portal]: https://manage.windowsazure.com/
+[Management Portal]: https://manage.windowsazure.com/
+[Install Xcode]: https://go.microsoft.com/fwLink/p/?LinkID=266532
+[Mobile Services iOS SDK]: https://go.microsoft.com/fwLink/p/?LinkID=266533
+[Developer Code Samples site]: http://go.microsoft.com/fwlink/?LinkId=262308
View
18 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-users-dotnet.md
@@ -10,7 +10,7 @@
# Get started with authentication in Mobile Services
-This topic shows you how to authenticate users in Windows Azure Mobile Services from your app. In this tutorial, you add authentication to the quickstart project using your choice of authentication provider supported by Mobile Services. After being successfully authenticated by the authentication provider and authorized by Mobile Services, a logged-in user is welcomed by name and the user ID value is displayed.
+This topic shows you how to authenticate users in Windows Azure Mobile Services from your app. In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Mobile Services. After being successfully authenticated and authorized by Mobile Services, the user ID value is displayed.
This tutorial walks you through these basic steps to enable authentication in your app:
@@ -20,20 +20,20 @@ This tutorial walks you through these basic steps to enable authentication in yo
This tutorial is based on the Mobile Services quickstart. You must also first complete the tutorial [Get started with Mobile Services].
-Mobile Services currently supports the following authentication providers:
+Mobile Services currently supports the following identity providers for authentication:
- Microsoft Live Connect
- Facebook
- Twitter
- Google
<div class="dev-callout"><b>Note</b>
- <p>This tutorial demonstrates the basic method provided by Mobile Services to authenticate users by using a variety of authentication providers. This method is easy to configure, and it supports multiple authentication providers. However, this method also requires users to log-in every time your app starts. To instead use Live Connect to provide a single sign-on experience in your Windows Store app, see the topic <a href="/en-us/develop/mobile/tutorials/get-started">Single sign-on for Windows Store apps by using Live Connect</a>.</p>
+ <p>This tutorial demonstrates the basic method provided by Mobile Services to authenticate users by using a variety of identity providers. This method is easy to configure and supports multiple providers. However, this method also requires users to log-in every time your app starts. To instead use Live Connect to provide a single sign-on experience in your Windows Store app, see the topic <a href="/en-us/develop/mobile/tutorials/get-started">Single sign-on for Windows Store apps by using Live Connect</a>.</p>
</div>
<a name="register"></a><h2><span class="short-header">Register your app</span>Register your app for authentication and configure Mobile Services</h2>
-To be able to authenticate users, you must register your app with an authentication provider. You must then register a client secret with Mobile Services.
+To be able to authenticate users, you must register your app with an identity provider. You must then register the provider-generated client secret with Mobile Services.
1. Log on to the [Windows Azure Management Portal], click **Mobile Services**, and then click your mobile service.
@@ -43,9 +43,9 @@ To be able to authenticate users, you must register your app with an authenticat
![][5]
- You will provide this value to the authentication provider when you register your app.
+ You may need to provide this value to the identity provider when you register your app.
-3. Expand your chosen authentication provider and follow the steps to register your app with the provider.
+3. Expand your chosen identity provider and follow the steps to register your app with the provider.
<div class="dev-callout-new-collapsed">
<strong>Microsoft Live Connect<span>Click to expand</span></strong>
@@ -84,7 +84,7 @@ To be able to authenticate users, you must register your app with an authenticat
</div>
</div>
-4. Back in the Management Portal, click the **Identity** tab, enter the app identifier and shared secret values obtained from your authentication provider, and click **Save**.
+4. Back in the Management Portal, click the **Identity** tab, enter the app identifier and shared secret values obtained from your identity provider, and click **Save**.
![][13]
@@ -148,7 +148,7 @@ Next, you will update the app to authenticate users with Live Connect before req
This creates a member variable for storing the current user and a method to handle the authentication process. The user is authenticated by using a Facebook login.
<div class="dev-callout"><b>Note</b>
- <p>If you are using an authentication provider other than Facebook, change the value of MobileServiceAuthenticationProvider above to the value for your provider.</p>
+ <p>If you are using an identity provider other than Facebook, change the value of MobileServiceAuthenticationProvider above to the value for your provider.</p>
</div>
8. Replace the existing **OnNavigatedTo** event handler with the handler that calls the new **Authenticate** method:
@@ -159,7 +159,7 @@ Next, you will update the app to authenticate users with Live Connect before req
RefreshTodoItems();
}
-9. Press the F5 key to run the app and sign into the app with your chosen authentication provider.
+9. Press the F5 key to run the app and sign into the app with your chosen identity provider.
When you are successfully logged-in, the app should run without errors, and you should be able to query Mobile Services and make updates to data.
View
204 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-users-js.md
@@ -0,0 +1,204 @@
+<properties linkid="mobile-get-started-with-users-js" urldisplayname="Mobile Services" headerexpose="" pagetitle="Get started with authentication in Mobile Services" metakeywords="Get started Windows Azure Mobile Services, mobile devices, Windows Azure, mobile, Windows 8, WinRT app" footerexpose="" metadescription="Get started using Windows Azure Mobile Services in your Windows Store apps." umbraconavihide="0" disquscomments="1"></properties>
+
+<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14798" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
+
+<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-users-dotnet/" title=".NET client version">C# and XAML</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-users-js/" title="JavaScript client version" class="current">JavaScript and HTML</a>
+ <span>Tutorial</span>
+</div>
+
+# Get started with authentication in Mobile Services
+
+This topic shows you how to authenticate users in Windows Azure Mobile Services from your app. In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Mobile Services. After being successfully authenticated and authorized by Mobile Services, the user ID value is displayed.
+
+This tutorial walks you through these basic steps to enable authentication in your app:
+
+1. [Register your app for authentication and configure Mobile Services]
+2. [Restrict table permissions to authenticated users]
+3. [Add authentication to the app]
+
+This tutorial is based on the Mobile Services quickstart. You must also first complete the tutorial [Get started with Mobile Services].
+
+Mobile Services currently supports the following identity providers for authentication:
+
+- Microsoft Live Connect
+- Facebook
+- Twitter
+- Google
+
+<div class="dev-callout"><b>Note</b>
+ <p>This tutorial demonstrates the basic method provided by Mobile Services to authenticate users by using a variety of identity providers. This method is easy to configure and supports multiple providers. However, this method also requires users to log-in every time your app starts. To instead use Live Connect to provide a single sign-on experience in your Windows Store app, see the topic <a href="/en-us/develop/mobile/tutorials/get-started">Single sign-on for Windows Store apps by using Live Connect</a>.</p>
+</div>
+
+<a name="register"></a><h2><span class="short-header">Register your app</span>Register your app for authentication and configure Mobile Services</h2>
+
+To be able to authenticate users, you must register your app with an identity provider. You must then register the provider-generated client secret with Mobile Services.
+
+1. Log on to the [Windows Azure Management Portal], click **Mobile Services**, and then click your mobile service.
+
+ ![][4]
+
+2. Click the **Dashboard** tab and make a note of the **Site URL** value.
+
+ ![][5]
+
+ You may need to provide this value to the identity provider when you register your app.
+
+3. Expand your chosen identity provider and follow the steps to register your app with the provider.
+
+ <div class="dev-callout-new-collapsed">
+ <strong>Microsoft Live Connect<span>Click to expand</span></strong>
+ <div class="dev-callout-content">
+ <p>Use the following procedure to register your app for authentication by using a Microsoft Account.</p>
+ <!-- start copied HTML source -->
+ <!-- end copied HTML source -->
+ </div>
+ </div>
+
+ <div class="dev-callout-new-collapsed">
+ <strong>Facebook<span>Click to expand</span></strong>
+ <div class="dev-callout-content">
+ <p>Use the following procedure to register your app for authentication by using a Facebook login.</p>
+ <!-- start copied HTML source -->
+ <!-- end copied HTML source -->
+ </div>
+ </div>
+
+ <div class="dev-callout-new-collapsed">
+ <strong>Twitter<span>Click to expand</span></strong>
+ <div class="dev-callout-content">
+ <p>Use the following procedure to register your app for authentication by using a Twitter login.</p>
+ <!-- start copied HTML source -->
+
+ <!-- end copied HTML source -->
+ </div>
+ </div>
+
+ <div class="dev-callout-new-collapsed">
+ <strong>Google<span>Click to expand</span></strong>
+ <div class="dev-callout-content">
+ <p>Use the following procedure to register your app for authentication by using a Google login.</p>
+ <!-- start copied HTML source -->
+ <!-- end copied HTML source -->
+ </div>
+ </div>
+
+4. Back in the Management Portal, click the **Identity** tab, enter the app identifier and shared secret values obtained from your identity provider, and click **Save**.
+
+ ![][13]
+
+Both your mobile service and your app are now configured to work with your chosed authenication provider.
+
+<a name="permissions"></a><h2><span class="short-header">Restrict permissions</span>Restrict permissions to authenticated users</h2>
+
+1. In the Management Portal, click the **Data** tab, and then click the **TodoItem** table.
+
+ ![][14]
+
+2. Click the **Permissions** tab, set all permissions to **Only authenticated users**, and then click **Save**. This will ensure that all operations against the **TodoItem** table require an authenticated user. This also simplifies the scripts in the next tutorial because they will not have to allow for the possibility of anonymous users.
+
+ ![][15]
+
+3. In Visual Studio 2012 Express for Windows 8, open the project that you created when you completed the tutorial [Get started with Mobile Services].
+
+4. Press the F5 key to run this quickstart-based app; verify that an exception with a status code of 401 (Unauthorized) is raised.
+
+ This happens because the app is accessing Mobile Services as an unauthenticated user, but the _TodoItem_ table now requires authentication.
+
+Next, you will update the app to authenticate users with Live Connect before requesting resources from the mobile service.
+
+<a name="add-authentication"></a><h2><span class="short-header">Add authentication</span>Add authentication to the app</h2>
+
+1. Open the default.html project file and add the following &lt;script&gt; element in the &lt;head&gt; element.
+
+ <script src="///LiveSDKHTML/js/wl.js"></script>
+
+ This enables Microsoft IntelliSense in the default.html file.
+
+5. Open the project file default.js and add the following comment to the top of the file.
+
+ /// <reference path="///LiveSDKHTML/js/wl.js" />
+
+ This enables Microsoft IntelliSense in the default.js file.
+
+5. In the **app.OnActivated** method overload, replace the call to the **refreshTodoItems** method with the following code:
+
+ // Request authentication from Mobile Services using a Facebook login.
+ var login = function () {
+ return new WinJS.Promise(function (complete) {
+ client.login("facebook").done(function (results) {
+ var mobileServiceUser = results[0];
+ refreshTodoItems();
+ var message = "You are now logged in as: "
+ + mobileServicesUser.userId;
+ var dialog =
+ new Windows.UI.Popups.MessageDialog(message);
+ dialog.showAsync().done(complete);
+ });
+ });
+ }
+
+ var authenticate = function () {
+ login().then(function () {
+ if (user === null) {
+
+ // Authentication failed, try again.
+ authenticate();
+ }
+ });
+ }
+
+ authenticate();
+
+ This creates a member variable for storing the current user and a method to handle the authentication process. The user is authenticated by using a Facebook login.
+
+ <div class="dev-callout"><b>Note</b>
+ <p>If you are using an identity provider other than Facebook, change the value of MobileServiceAuthenticationProvider above to the value for your provider.</p>
+ </div>
+
+9. Press the F5 key to run the app and sign into the app with your chosen identity provider.
+
+ When you are successfully logged-in, the app should run without errors, and you should be able to query Mobile Services and make updates to data.
+
+## <a name="next-steps"> </a>Next steps
+
+In the next tutorial, [Authorize users with scripts], you will take the user ID value provided by Mobile Services based on an authenticated user and use it to filter the data returned by Mobile Services.
+
+<!-- Anchors. -->
+[Register your app for authentication and configure Mobile Services]: #register
+[Restrict table permissions to authenticated users]: #permissions
+[Add authentication to the app]: #add-authentication
+[Next Steps]:#next-steps
+
+<!-- Images. -->
+[0]: ../Media/mobile-services-submit-win8-app.png
+[1]: ../Media/mobile-services-win8-app-name.png
+[2]: ../Media/mobile-services-store-association.png
+[3]: ../Media/mobile-services-select-app-name.png
+[4]: ../Media/mobile-services-selection.png
+[5]: ../Media/mobile-service-uri.png
+[6]: ../Media/mobile-live-connect-apps-list.png
+[7]: ../Media/mobile-live-connect-app-api-settings.png
+[8]: ../Media/mobile-services-win8-app-advanced.png
+[9]: ../Media/mobile-services-win8-app-connect-redirect.png
+[10]: ../Media/mobile-services-win8-app-connect-redirect-uri.png
+[11]: ../Media/mobile-services-win8-app-push-connect.png
+[12]: ../Media/mobile-services-win8-app-connect-auth.png
+[13]: ../Media/mobile-identity-tab.png
+[14]: ../Media/mobile-portal-data-tables.png
+[15]: ../Media/mobile-portal-change-table-perms.png
+[16]: ../Media/mobile-add-reference-live-js.png
+
+<!-- URLs. -->
+[Submit an app page]: http://go.microsoft.com/fwlink/p/?LinkID=266582
+[My Applications]: http://go.microsoft.com/fwlink/p/?LinkId=262039
+[Live SDK for Windows]: http://go.microsoft.com/fwlink/p/?LinkId=262253
+[Single sign-on for Windows Store apps by using Live Connect]: ./mobile-services-single-sign-on-win8-js.md
+[Get started with Mobile Services]: ./mobile-services-get-started.md
+[Get started with data]: ./mobile-services-get-started-with-data-js.md
+[Get started with authentication]: ./mobile-services-get-started-with-users-js.md
+[Get started with push notifications]: ./mobile-services-get-started-with-push-js.md
+[Authorize users with scripts]: ./mobile-services-authorize-users-js.md
+[WindowsAzure.com]: http://www.windowsazure.com/
+[Windows Azure Management Portal]: https://manage.windowsazure.com/
View
19 DevCenter/Mobile/Tutorials/mobile-services-get-started.md
@@ -1,17 +1,20 @@
<properties linkid="mobile-services-get-started" urldisplayname="Mobile Services" headerexpose="" pagetitle="Get started with Mobile Services in Windows Azure" metakeywords="Get started Windows Azure Mobile Services, mobile devices, Windows Azure, mobile, Windows 8, WinRT app" footerexpose="" metadescription="Get started using Windows Azure Mobile Services in your Windows Store apps." umbraconavihide="0" disquscomments="1"></properties>
<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14812" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umbversionid="254ca664-c4f3-4815-8073-c86d43f4aa16" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
-# <a name="getting-started"> </a>Get started with Mobile Services
-This tutorial shows you how to add a cloud-based backend service to a Windows Store app using Windows Azure Mobile Services.
-![][13]
+<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started/" title="Windows Store version" class="current">Windows Store app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-ios/" title="iOS version">iOS app</a>
+ <span>Tutorial</span>
+</div>
-In this tutorial, you will create both a new mobile service and a simple _To do list_ app that stores app data in the new mobile service.
+# <a name="getting-started"> </a>Get started with Mobile Services
+This tutorial shows you how to add a cloud-based backend service to a Windows Store app using Windows Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple _To do list_ app that stores app data in the new mobile service.
A screenshot from the completed app is below:
![][0]
-Completing this guide is a prerequisite for all other Mobile Services tutorials.
+Completing this guide is a prerequisite for all other Mobile Services tutorials for Windows Store apps.
<div chunk="../../Shared/Chunks/create-account-and-mobile-note.md" />
@@ -54,7 +57,7 @@ Follow these steps to create a new mobile service.
You have now created a new mobile service that can be used by your mobile apps.
-## Create a new app
+## <h2><span class="short-header">Create a new app</span>Create a new Windows Store app</h2>
Once you have created your mobile service, you can follow an easy quickstart in the Management Portal to either create a new app or modify an existing app to connect to your mobile service.
@@ -63,7 +66,7 @@ In this section you will create a new Windows Store app that is connected to you
1. In the Management Portal, click **Mobile Services**, and then click the mobile service that you just created.
-2. In the quickstart tab, expand **Create a new Windows 8 application**.
+2. In the quickstart tab, click **Windows** under **Choose platform** and expand **Create a new Windows Store app**.
![][6]
@@ -115,7 +118,7 @@ Now that you have completed the quickstart, learn how to perform additional impo
<br/>Learn more about storing and querying data using Mobile Services.
* [Get started with authentication]
- <br/>Learn how to authenticate users of your app with Windows Account.
+ <br/>Learn how to authenticate users of your app with an identity provider.
* [Get started with push notifications]
<br/>Learn how to send a very basic push notification to your app.
View
4 DevCenter/Mobile/Tutorials/mobile-services-single-sign-on-win8-js.md
@@ -120,13 +120,13 @@ Next, you will update the app to authenticate users with Live Connect before req
This enables Microsoft IntelliSense in the default.html file.
-5. Open the project file default.js and add the following comment to the top of the file.
+4. Open the project file default.js and add the following comment to the top of the file.
/// <reference path="///LiveSDKHTML/js/wl.js" />
This enables Microsoft IntelliSense in the default.js file.
-6. In the **app.OnActivated** method overload, replace the call to the **refreshTodoItems** method with the following code:
+5. In the **app.OnActivated** method overload, replace the call to the **refreshTodoItems** method with the following code:
var session = null;

0 comments on commit 6ebace5

Please sign in to comment.
Something went wrong with that request. Please try again.